PrimeReact DataTable：如何基于某一单元格修改另一单元格的值

直接修改rowData对象属于可变操作，React依赖不可变的状态更新来触发组件重新渲染，PrimeReact的DataTable内部也会基于数据源的状态变化同步UI和编辑状态。你直接修改rowData后，组件没有检测到状态变化，导致code2的新值没有同步到DataTable的内部状态，编辑时自然显示旧值。

不要直接修改rowData，而是通过更新数据源状态的方式实现，确保数据变化能被React和DataTable感知：

1. 假设你的数据源是通过React状态管理的（比如useState）
2. 在onCellEditComplete中，创建新的行对象和数据源数组，避免修改原数据
3. 更新状态触发重新渲染

示例代码：

// 假设你的数据源是用useState管理的
const [data, setData] = useState(initialDataSource);

const onCellEditComplete = (e) => {
  let { rowData, newValue, field } = e;
  
  if (field === "code") {
    // 1. 创建新的行对象，合并原数据和更新后的code2
    const updatedRow = {
      ...rowData,
      code: newValue, // 同步code的新值
      code2: `pref${newValue}`
    };
    // 2. 找到当前行在数据源中的索引（假设每行有唯一标识id）
    const rowIndex = data.findIndex(item => item.id === rowData.id);
    // 3. 创建新的数据源数组，替换对应行
    const updatedData = [...data];
    updatedData[rowIndex] = updatedRow;
    // 4. 更新状态，触发组件重新渲染
    setData(updatedData);
  }
};

• React的状态更新必须遵循不可变性原则，直接修改原对象不会触发重新渲染
• DataTable会监听数据源的变化，当数据源通过状态更新后，组件会重新渲染并同步所有单元格的状态，包括code2的编辑状态

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