React useState重新渲染时未正确初始化问题求助

你遇到的问题核心在于使用数组索引作为子组件的key，以及useState的初始化特性：

1. React依赖key识别组件唯一性，用索引当key时，删除数组第二个元素后，原第三个元素的索引从2变为1。React会认为索引1对应的还是原来的子组件，仅更新它的props。
2. useState(someData)只会在组件首次挂载时执行初始化，后续props变化不会自动更新子组件内部的state，因此子组件依然显示旧的dataInChild值。

另外注意：你的父组件map函数未返回子组件，会导致子组件无法渲染，需补上return或改用箭头函数的隐式返回。

方案1：使用唯一标识作为key（最优） #

给数组每个元素添加唯一ID（比如后端返回的id字段），用这个值作为key，React能准确识别组件增删，不会复用错误组件：

// 假设数组元素有唯一id字段
export default ParentComponent = () => {
  return (
    <>
      { someArray.map(item => (
        <ChildComponent key={item.id} someData={item} />
      )) }
    </>
  )
}

如果没有现成唯一ID，可用元素的唯一属性组合（比如${item.firstName}-${item.company}），但更推荐给每个元素添加独立唯一标识。

方案2：子组件监听props变化同步state #

若必须用索引当key（不推荐），可通过useEffect监听someData变化，手动同步到子组件state：

export default ChildComponent = ({someData}) => {
  const [dataInChild, updateData] = useState(someData);

  // 监听someData变化，同步到state
  useEffect(() => {
    updateData(someData);
  }, [someData]);

  // 补充输入框onChange事件，否则输入框为只读状态
  return (
    <div>
      <input 
        name="firstName" 
        value={dataInChild.firstName} 
        onChange={(e) => updateData({...dataInChild, firstName: e.target.value})} 
      />
      <input 
        name="company" 
        value={dataInChild.company} 
        onChange={(e) => updateData({...dataInChild, company: e.target.value})} 
      />
    </div>
  )
}

方案3：将状态提升到父组件 #

如果子组件状态无需独立维护，把状态放在父组件统一管理，子组件仅负责渲染和触发更新，可避免props与state不同步问题：

父组件代码： #

import { useState } from 'react';

export default ParentComponent = () => {
  const [someArray, setSomeArray] = useState([
    {firstName: "Steve", company: "The Office"},
    {firstName: "Gunther", company: "Central Perk"},
    {firstName: "Clark", company: "The Daily Planet"}
  ]);

  // 更新数组元素
  const updateItem = (index, newData) => {
    const newArray = [...someArray];
    newArray[index] = newData;
    setSomeArray(newArray);
  };

  // 删除数组元素（不直接修改原数组，创建新数组更新状态）
  const deleteItem = (index) => {
    const newArray = someArray.filter((_, i) => i !== index);
    setSomeArray(newArray);
  };

  return (
    <>
      { someArray.map((item, i) => (
        <ChildComponent 
          key={item.firstName} // 用唯一属性当key，规避索引问题
          someData={item} 
          onUpdate={(newData) => updateItem(i, newData)} 
        />
      )) }
    </>
  )
}

子组件代码： #

export default ChildComponent = ({someData, onUpdate}) => {
  return (
    <div>
      <input 
        name="firstName" 
        value={someData.firstName} 
        onChange={(e) => onUpdate({...someData, firstName: e.target.value})} 
      />
      <input 
        name="company" 
        value={someData.company} 
        onChange={(e) => onUpdate({...someData, company: e.target.value})} 
      />
    </div>
  )
}

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