React子组件映射渲染时状态未正确更新问题

问题根源 #

你遇到的问题来自两个核心点：

• 使用数组索引作为key：React通过key识别组件身份，当用索引做key时，插入新元素后，后续元素的key会和原位置的组件复用。比如在索引2后插入5，原索引3的组件会被复用给新数组的索引3（值为5），但这个组件的state还是初始化时的3，不会自动更新。
• 子组件useState仅初始化一次：useState(theThing)只会在组件首次挂载时将theThing作为初始值，后续props变化不会触发state更新。

解决方案 #

1. 替换key为唯一标识

不要用数组索引作为key，改用每个元素的唯一值（如果元素可能重复，建议给每个元素添加唯一ID）。比如修改数组结构为带ID的对象：

父组件修改后：

export const Parent = () => {
  const [array, setArray] = useState([
    { id: 1, value: 0 },
    { id: 2, value: 1 },
    { id: 3, value: 2 },
    { id: 4, value: 3 },
    { id: 5, value: 4 }
  ]);

  const addThing = (index: number) => {
    const newItem = { id: Date.now(), value: 5 }; // 用时间戳做临时唯一ID
    let newArray = [...array];
    newArray.splice(index + 1, 0, newItem);
    setArray(newArray);
  };

  return (
    <>
      {array.map((elem, i) => {
        return (
          <div key={elem.id}>
            <Child theThing={elem.value} />
            <button onClick={() => addThing(i)}> add a thing </button>
          </div>
        );
      })}
    </>
  );
};

2. 子组件同步props到state

如果子组件必须将props存到state中，需要用useEffect监听props变化，更新state：

子组件修改后：

export const Child = ({ theThing }) => {
  const [thing, setThing] = useState(theThing);

  // 监听props变化，更新state
  useEffect(() => {
    setThing(theThing);
  }, [theThing]);

  console.log(thing);
  return <div>{thing}</div>;
};

3. 更优方案：直接使用props

如果子组件的thing不需要本地修改，完全可以不用state，直接使用传入的props，这样就不会有同步问题：

简化后的子组件：

export const Child = ({ theThing }) => {
  console.log(theThing);
  return <div>{theThing}</div>;
};

效果验证 #

修改后，点击按钮插入元素时，React会根据唯一key正确渲染新的Child组件，子组件也会同步获取最新的props值，日志会输出预期的[0,1,2,5,3,4]。

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