React数组匹配元素无渲染问题排查：为何预期列表未显示？

用户代码如下：

const Chat = () => {
  const [array1, setArray1] = useState(['one', 'two', 'three', 'four', 'five']);
  const [array2, setArray2] = useState(['four', 'two']);

  return (
    <div>
      <ul>
        {array1.map((d) => {
          return array2.forEach((e) => {
            return d === e ? <li>{e}</li> : '';
          });
        })}
      </ul>
    </div>
  );
};

export default Chat;

需求是按array1的顺序渲染array2中的匹配元素（即显示“two”“four”），但页面无任何列表项，错误原因如下：

• forEach无返回值：array2.forEach()的返回值始终是undefined，所以array1.map()每个迭代都返回undefined，React不会渲染undefined内容。
• 逻辑不符合需求：即便forEach有返回值，当前逻辑会遍历array2所有元素，多次返回结果，无法实现“按array1顺序筛选array2元素”的目标。

修正后的代码 #

const Chat = () => {
  const [array1, setArray1] = useState(['one', 'two', 'three', 'four', 'five']);
  const [array2, setArray2] = useState(['four', 'two']);
  // 把array2转成Set，提高查找效率
  const array2Set = new Set(array2);

  return (
    <div>
      <ul>
        {array1.map((d) => {
          // 判断当前array1的元素是否在array2中，是则渲染li
          return array2Set.has(d) ? <li key={d}>{d}</li> : null;
        })}
      </ul>
    </div>
  );
};

export default Chat;

说明：

• 用Set存储array2元素，查找元素的时间复杂度从O(n)降到O(1)，性能更优。
• 遍历array1时，只渲染存在于array2中的元素，保证顺序和array1一致。
• 添加了key属性，符合React列表渲染的要求，避免控制台警告。

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