在这种情况下如何避免重复代码?

我写了这段代码。根据是否包含在另一个数组中的项目返回 true 或 false 值。

但是我的前辈说这段代码不干。我想不出办法让它更干燥。有人可以帮我看看方法吗

const renderItem = ({item, index}) => {
    if (favList.includes(item.id)) {
      return (
        <IndividualProduct
          info={item}
          index={index}
          key={index}
          fav={true}
          stateChange={stateChange}
          setLoading={setLoading}
          setSignInShown={setSignInShown}
        />
      );
    } else {
      return (
        <IndividualProduct
          info={item}
          index={index}
          key={index}
          fav={false}
          stateChange={stateChange}
          setLoading={setLoading}
          setSignInShown={setSignInShown}
        />
      );
    }
  };

这 2 个返回之间的唯一区别是favprop的 true 或 false 值

回答

唯一改变的是fav道具,所以使用.includes那里的调用结果。

const renderItem = ({ item, index }) => (
    <IndividualProduct
        info={item}
        index={index}
        key={index}
        fav={favList.includes(item.id)}
        stateChange={stateChange}
        setLoading={setLoading}
        setSignInShown={setSignInShown}
    />
);

另一种选择是传播与道具同名的变量名。

const renderItem = ({ item, index }) => (
    <IndividualProduct
        {...{ index, stateChange, setLoading, setSignInShown }}
        info={item}
        key={index}
        fav={favList.includes(item.id)}
    />
);


以上是在这种情况下如何避免重复代码?的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>