如何使用 React.js 重构 map 方法中的代码冗余

Question

以下是代码，使用 React.js 我调用 swapi 数组（StarWars API）每个 10 个字符及其在

内每页的描述

results0 - results4

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

以下是重复代码的开始。 results1 ...results4 使用了相同的 .map 方法和 returns 相同的卡片信息。

 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

首先，如果回调相同，将它们分解成实用函数，记得使用 array::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}
  />
);

这可以使用对象解构进一步减少

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 个结果道具转储到一个数组中并映射它们

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

Answer 2

你可以像这样合并所有数组并一步完成映射

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;

如何使用 React.js 重构 map 方法中的代码冗余

How to refactor a code redundancy in the map method using React.js

javascript

refactoring

reactjs