React中基于数组条件返回不同元素失效问题的解决方法

嘿，这个问题我刚学React的时候也踩过一模一样的坑！咱们先拆解下问题出在哪：

你用currUser().played.forEach()循环检查每个square，但forEach回调里的return只会终止当前这一次循环迭代，并不会让外层的组件函数直接返回<div className="inactive">。所以哪怕控制台打印了N次0，循环跑完之后，代码还是会走到最后一行的return <div className="square">，自然所有元素都是square类啦。

怎么修复呢？咱们换个思路，先判断当前id是否在played数组里，再决定返回哪个div就行，推荐这两种简单方法：

方法1：用some()做存在性检查 #

some()会遍历数组，只要有一个元素满足条件就返回true，非常适合这种“有没有匹配项”的判断：

function YourSquareComponent({ id }) {
  // 检查当前id是否在已玩列表中
  const hasPlayedThisSquare = currUser().played.some(square => square === id);
  
  if (hasPlayedThisSquare) {
    return <div className="inactive"></div>;
  }
  return <div className="square"></div>;
}

方法2：用find()直接查找匹配元素 #

如果后续需要用到匹配的元素（哪怕现在暂时不用），find()也是个不错的选择，逻辑更直观：

function YourSquareComponent({ id }) {
  const matchedSquare = currUser().played.find(square => square === id);
  
  // 找到匹配项就返回inactive样式，否则返回默认square
  return matchedSquare ? <div className="inactive"></div> : <div className="square"></div>;
}

简单总结下：forEach是用来遍历执行操作的，不是用来获取返回值或者控制外层函数流程的，遇到这种需要判断数组里有没有符合条件元素的场景，用some/find这类方法更合适~

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