React组件数组状态更新问题求助：无法更新含子组件的state数组

首先要明确：不要把React组件直接存在state里，state的职责是存储驱动UI渲染的数据，而非组件实例本身。你当前的实现思路有问题，这也是你无法顺利更新数组的核心原因。下面是具体的修正方案：

1. 重构State，存储数据而非组件 #

把inputList从存储<Row>组件改为存储每个Row的配置数据，比如每个项是包含id、value、sign、enabled的对象：

const [result, setResult] = useState(0);
// 初始化空数组，每个元素是Row的配置数据
const [inputList, setInputList] = useState([]);

2. 编写生成唯一ID的方法 #

确保每个数据项有唯一标识，方便后续定位更新：

const generateId = () => {
  return Date.now() + Math.random().toString(36).substr(2, 9);
};

3. 实现添加Row的逻辑 #

当需要新增一行时，往inputList里添加新的配置数据：

const addRow = () => {
  setInputList(prevList => [
    ...prevList,
    {
      id: generateId(),
      value: 0,
      sign: 'plus',
      enabled: true
    }
  ]);
};

4. 处理子组件的回调更新 #

子组件输入变化时，传递id和新的value给父组件，父组件通过id找到对应项并更新：

const updateRowValue = (id, newValue) => {
  setInputList(prevList => 
    prevList.map(item => 
      item.id === id ? { ...item, value: newValue } : item
    )
  );
  // 这里可以调用calculateRes计算result
  calculateRes();
};

const removeRow = (id) => {
  setInputList(prevList => prevList.filter(item => item.id !== id));
  calculateRes();
};

5. 渲染Row组件 #

在父组件的JSX中，遍历inputList数据，渲染对应的Row组件：

return (
  <div>
    <button onClick={addRow}>添加行</button>
    {inputList.map(item => (
      <Row
        key={item.id}
        id={item.id}
        parentCallback={removeRow}
        updateValue={updateRowValue}
        value={item.value}
        sign={item.sign}
        enabled={item.enabled}
      />
    ))}
    <p>计算结果：{result}</p>
  </div>
);

为什么之前的做法不可行？ #

• React的state需要是可序列化的数据，组件实例无法被序列化，直接存储会导致状态管理混乱。
• 直接操作组件数组时，你无法精准修改单个组件的props，而通过数据驱动渲染，只需要更新对应的数据项，React会自动重新渲染对应的组件，逻辑更清晰。

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