React中props更新后子组件state未同步的原因咨询

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

React中useState的参数只在组件第一次挂载时作为初始值生效，后续组件因props变化或自身state更新触发重新渲染时，这个参数会被直接忽略，不会再用来更新内部state的值。

你代码里的const [inA, setInA] = React.useState(a || -1);，只有Child组件第一次渲染时，会用当时传入的props.a初始化inA；之后Parent组件的a更新导致Child重新渲染，useState不会再读取新的props.a，所以inA始终保持第一次的初始值。

验证你的观察 #

从Child组件里的console.log(a, b)可以看到，每次点击按钮后，控制台确实会打印更新后的a和b，说明Child确实重新渲染了，也拿到了最新的props，但内部的inA、inB没变化——这完全符合useState的设计逻辑。

解决方案：让内部状态跟随props更新 #

如果你需要inA、inB随着props的a、b变化而更新，有两种常见处理方式：

方式一：用useEffect监听props变化 #

通过useEffect监听props的a和b，当它们变化时手动更新内部state：

export function Child({ a, b }) {
  console.log(a, b);
  const [inA, setInA] = React.useState(a || -1);
  const [inB, setInB] = React.useState(b || -1);

  React.useEffect(() => {
    setInA(a || -1);
    setInB(b || -1);
  }, [a, b]); // 仅当a或b变化时执行

  return (
    <div>
      <div>{inA}</div>
      <div>{inB}</div>
    </div>
  );
}

方式二：直接使用props值（无需内部state） #

如果inA、inB不需要独立维护状态，只是对props的简单处理，完全可以去掉内部state，直接在渲染时计算：

export function Child({ a, b }) {
  console.log(a, b);
  const inA = a || -1;
  const inB = b || -1;

  return (
    <div>
      <div>{inA}</div>
      <div>{inB}</div>
    </div>
  );
}

这种方式更简洁高效，每次props变化都会直接使用最新值。

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