如何简化React useEffect中重复的if判断语句 缩短冗余代码

你可以通过白名单匹配+单次状态更新的方式大幅精简代码，同时还能优化性能：

核心优化点 #

• 把需要匹配的货币编码整理为白名单，省去全部重复if判断
• 一次性过滤所有符合要求的条目后再更新状态，避免多次调用setCards触发多余渲染
• 修正原代码误用map的问题，改用filter直接筛选需要的条目

简化后代码 #

useEffect(() => {
  // 后续新增默认货币直接往这个数组加即可，无需修改判断逻辑
  const defaultCurrencyList = ['EUR', 'USD', 'RUB', 'INR'];
  setCards(prevItems => [
    ...prevItems,
    ...Object.entries(allCurrencies).filter(([currencyCode]) => 
      defaultCurrencyList.includes(currencyCode)
    )
  ]);
}, [allCurrencies]);

如果你的默认货币数量很多，可以把白名单换成Set提升判断效率：

useEffect(() => {
  const defaultCurrencySet = new Set(['EUR', 'USD', 'RUB', 'INR']);
  setCards(prevItems => [
    ...prevItems,
    ...Object.entries(allCurrencies).filter(([currencyCode]) => 
      defaultCurrencySet.has(currencyCode)
    )
  ]);
}, [allCurrencies]);

注：以上逻辑完全对齐你原有代码的执行效果，如果需要避免allCurrencies变化时重复添加相同卡片，在更新前增加去重逻辑即可。

内容的提问来源于stack exchange，提问作者user14327296