如何使用 React.js 在 map 方法中重構代碼冗余

Question

以下是代碼，使用 React.js，我在其中調用 swapi（StarWars API）的 arrays 每個 10 個字符及其每頁內部的描述

結果0 - 結果4

const CardList = ({ results0, results1, results2, results3, results4 }) => {
  return(
    <Fragment>
    { 

以下是重復代碼的開始。 results1...results4 使用相同的.map方法並返回相同的卡信息。

 results0.map((people, i) => {
      return (
        <Card
          key={i}
          name={results0[i].name}
          skin_color={results0[i].skin_color}
          eye_color={results0[i].eye_color}
          birth_year={results0[i].birth_year}
          gender={results0[i].gender}
        />
      );
    })

result1.map(same values)=>{same function} ...result4.map(same values)=>{same function},

  
     }
     </Fragment>      
     );  
  }; 
export default CardList;

有沒有辦法縮短代碼？

Answer 1

首先，如果回調相同，將它們分解到實用程序 function 中，記住使用數組的當前值::map 回調

const renderPerson = (person, i) => (
  <Card
    key={i}
    name={person.name}
    skin_color={person.skin_color}
    eye_color={person.eye_color}
    birth_year={person.birth_year}
    gender={person.gender}
  />
);

這可以使用 object 解構進一步減少

const renderPerson = ({ birth_year, eye_color, gender, name, skin_color }, i) => (
  <Card
    key={i}
    name={name}
    skin_color={skin_color}
    eye_color={eye_color}
    birth_year={birth_year}
    gender={gender}
  />
);

現在您已將代碼簡化為更易於管理

results0.map(renderPerson)
results1.map(renderPerson)
results2.map(renderPerson)
results3.map(renderPerson)
results4.map(renderPerson)

但是你還有一些重復，你可以將 5 個結果道具轉儲到一個數組中，也可以將它們 map

[results0, results1, results2, results3, results4].map((result, i) => (
  <Fragment key={i}>
    {result.map(renderPerson)}
  </Fragment>
)) 

Answer 2

您可以像這樣將所有 arrays 組合起來，然后一步完成 map

const CardList = ({ results0, results1, results2, results3, results4 }) => {
    return (
        <Fragment>
            {[...results0, ...results1, ...results2, ...results3, ...results4].map((result, i) =>
                (<Card
                    key={i}
                    name={result.name}
                    skin_color={result.skin_color}
                    eye_color={result.eye_color}
                    birth_year={result.birth_year}
                    gender={rresult.gender}
                />))
            }
        </Fragment>
    );
};
export default CardList;