React子组件中text状态未更新问题咨询

核心原因1：useReducer的初始值仅在首次渲染时生效 #

你在子组件中通过useReducer(reducer, count)初始化text状态，这里传入的count作为初始值只会在组件第一次挂载渲染时生效。后续父组件更新count导致子组件重新渲染时，React不会再用新的count去覆盖已存在的text状态——这是Hooks的设计规则：状态的初始值仅在组件挂载阶段被读取一次。

核心原因2：缺少触发text状态更新的逻辑 #

就算你希望text跟随count变化，当前代码里也没有调用setText去触发reducer更新状态的逻辑。而且你的reducer函数不管接收什么action，都只是返回原state的浅拷贝，完全没有做任何状态修改的操作。

修复方案 #

如果要让text和父组件的count保持同步，可以这样修改：

import React,{useReducer, useEffect} from "react";

// 修改reducer，根据action传入的payload更新状态
let reducer = (state, action) => {
  return action.payload;
}

export default function Child({count,setCount}){
  console.log("hi");
  const[text,setText]=useReducer(reducer,count);

  // 监听count的变化，一旦更新就触发text状态更新
  useEffect(() => {
    setText({ payload: count });
  }, [count]);

  return <>
    {text}
    <button onClick={()=>{setCount(count+1)}}>Go</button>
  </>
}

如果不需要useReducer的复杂状态处理逻辑，甚至可以直接使用props的count，没必要额外维护text状态。

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