React父组件状态更新后 传入子组件的props未同步触发重渲染

这是React Hooks的标准运行机制，不属于框架bug：

• useState接收的初始值参数仅在组件首次挂载时生效一次，后续组件因为props变化触发重渲染时，这个初始值参数会被直接忽略，子组件内部维护的独立state不会和传入的props自动同步。
• 示例代码中输入框绑定的是子组件内部stateperson.id，而非父组件传入的passedId。父组件状态更新后，子组件确实会触发重渲染、也能拿到最新的props值，但内部state没有同步更新，所以输入框始终显示旧的内部state值，表现为没有获取到最新值。
• 代码中还有两个会放大状态不同步问题的细节：
  • 列表渲染使用数组索引作为key，数组内容变化时React会错误复用组件实例，加剧状态错位
  • 更新数组状态时直接引用外部闭包的array变量，连续触发更新时可能拿到过期的旧状态值

const {useState} = React;

const App = () => {
  const [array, setArray] = useState([1, 2, 3, 4, 5]);
  const changeHandler = (newID, index) => {
    setArray([...array.slice(0, index), newID, ...array.slice(index + 1)]);
  };
  return (
    <div className="App">
      <h1>Array in parent:</h1>
      {array.map((el) => el)}
      <h1>Array in children</h1>
      {array.map((el, index) => (
        <InputComponent
          key={index}
          passedId={el}
          index={index}
          changeHandler={changeHandler}
        />
      ))}
    </div>
  );
}

const InputComponent = ({ passedId, index, changeHandler }) => {
  const [person, setPerson] = useState({
    id: passedId
  });
  return (
    <input
      type="number"
      min="1"
      max="10"
      value={person.id}
      onChange={(e) => changeHandler(e.target.value, index)}
    />
  );
};


ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

对应入口HTML代码：

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

根据实际业务场景二选一即可：

方案1：子组件不需要独立维护本地状态（推荐） #

如果子组件不需要对传入值做本地暂存、独立修改，完全不需要额外声明本地state，直接绑定props传入的值即可，这也是React推荐的完全受控组件模式：

const InputComponent = ({ passedId, index, changeHandler }) => {
  return (
    <input
      type="number"
      min="1"
      max="10"
      value={passedId}
      onChange={(e) => changeHandler(e.target.value, index)}
    />
  );
};

同时修复父组件的两个细节问题：

• 更新状态时使用函数式写法，避免闭包拿到过期的旧数组
• 列表渲染使用和元素绑定的唯一值作为key，不要用数组索引

const changeHandler = (newID, index) => {
  setArray(prev => [...prev.slice(0, index), newID, ...prev.slice(index + 1)]);
};

// 列表渲染部分
{array.map((el, index) => (
  <InputComponent
    // 业务中如果有真实唯一ID优先用ID，这里临时用值+索引组合避免复用冲突
    key={`item-${el}-${index}`}
    passedId={el}
    index={index}
    changeHandler={changeHandler}
  />
))}

方案2：子组件确实需要维护独立本地状态 #

如果子组件需要基于传入值做本地草稿暂存、输入校验等独立逻辑，可以通过useEffect监听props变化，手动同步更新本地state：

const {useState, useEffect} = React;
const InputComponent = ({ passedId, index, changeHandler }) => {
  const [person, setPerson] = useState({
    id: passedId
  });
  // 监听传入的props变化，同步更新本地state
  useEffect(() => {
    setPerson({id: passedId})
  }, [passedId])

  const handleLocalChange = (e) => {
    // 可以在这里加本地校验、草稿暂存等独立逻辑
    setPerson({id: e.target.value})
    changeHandler(e.target.value, index)
  }

  return (
    <input
      type="number"
      min="1"
      max="10"
      value={person.id}
      onChange={handleLocalChange}
    />
  );
};

注意：这种从props派生state的写法会存在双数据源，提升状态不同步的bug概率，没有强需求不推荐使用。

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