时间戳

首页 > 解决方案 > 如何使用 React.js 重构 map 方法中的代码冗余

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

问题描述

以下是代码，使用 React.js，我在其中调用 swapi (StarWars API) 数组，每个数组有 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;

有没有办法缩短代码？

标签： javascriptreactjsrefactoring

解决方案

首先，如果回调相同，将它们分解为实用函数，记住使用 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>
))

推荐阅读