React中子组件含useState时父组件更新触发Hooks错误的解决方法

核心错误原因 #

你现在的问题出在错误的子组件渲染方式：在map里直接调用MyChildComponent(wc, index)，这不是React认可的组件渲染方式。这种写法会让React把子组件内部的useState当成父组件App的hooks来处理，当父组件状态更新导致objects数组长度变化时，hooks的调用数量就会和上一次渲染不匹配，直接触发Rendered fewer hooks than expected错误。

而且你之前把useState移到map里的尝试，本质是在循环中调用hooks，同样违反了React的hooks规则——hooks必须在组件的顶层作用域调用，不能放在循环、条件判断里。

正确解决方案 #

只需要修改子组件的渲染方式，用JSX语法渲染，同时给每个子组件加上唯一key：

修改父组件的map渲染代码

<View>
  {objects.map((wc, index) =>
    {/* 用JSX语法渲染组件，传递props，添加key */}
    <MyChildComponent 
      key={index} {/* 优先用wc的唯一标识比如wc.id，没有的话用index临时替代 */}
      wc={wc} 
    />
  )}
</View>

子组件保持正常定义

子组件内部的useState不需要改动，保持封装状态的模式即可：

function MyChildComponent({ wc }) {
  // 子组件顶层调用hooks，符合规则
  const [localState, setLocalState] = useState(/* 你的初始状态 */);

  // 子组件的逻辑、渲染代码
  return (
    <View>
      {/* 基于wc和localState渲染内容 */}
    </View>
  );
}

为什么这样能解决问题 #

1. 用JSX渲染子组件时，React会把每个MyChildComponent当作独立的组件实例处理，每个实例的hooks调用都是独立的，不会和父组件的hooks混淆。
2. 每个子组件的useState都在自身的顶层作用域调用，完全符合React的hooks规则，不会出现调用数量不匹配的情况。
3. 父组件状态更新时，会重新触发map渲染，子组件会根据新的wc props更新，同时自身的本地状态也能正常保留和维护。

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