React使用map遍历state渲染Cell组件不显示问题咨询

核心逻辑链路如下：

1. Grid组件初始状态下board为数组[11, 2, 3]，满足board && board.map()的渲染条件，首次渲染会生成3个Cell子组件
2. 每个Cell组件挂载完成后，会自动触发内部的useEffect（useEffect默认在组件挂载、依赖项更新时执行）。此时Cell内部filled的初始值为null，代码直接调用传入的cellFillSet(filled)，也就是把父组件的board状态从原数组直接覆盖为null
3. 父组件board更新为null后触发重渲染，board && board.map()的条件不成立，所有Cell组件直接被卸载，因此视觉上看不到任何Cell渲染结果。

补充说明：即使你按注释修改为cellFillSet([filled])，暂时解决了board变为null的问题，依然存在逻辑缺陷：所有Cell共用同一个boardSet，任意Cell的filled变化都会把整个board数组覆盖为仅含当前Cell值的单元素数组，最终只会剩下1个Cell渲染。

1. 快速修复渲染失败问题 #

直接在Cell的useEffect中增加空值判断，避免初始挂载时filled为null的状态覆盖父组件的board：

useEffect(() => {
  // 初始值为null时不执行状态更新
  if (filled === null) return
  cellFillSet([filled])
}, [filled])

2. 修正状态管理逻辑（推荐） #

你当前的board数组是用来对应每个Cell的填充状态，应该通过下标更新对应位置的数值，而非直接替换整个数组：

Grid组件修改 #

在遍历board时给每个Cell传递对应下标：

return (
  <section className="grid">
    {board &&
      board.map((el, index) => {
        return <Cell key={index} player={player} index={index} cellFillSet={boardSet}></Cell>;
      })}
  </section>
);

Cell组件修改 #

更新状态时用函数式更新修改指定下标的值，不影响数组其他元素：

useEffect(() => {
  if (filled === null) return
  cellFillSet(prevBoard => {
    const newBoard = [...prevBoard]
    newBoard[index] = filled
    return newBoard
  })
}, [filled, index, cellFillSet])

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