Material UI DataGrid processRowUpdate困惑：更新状态后表格值重置

1. 受控组件特性：DataGrid是受控组件，其显示的行数据完全依赖rows prop。当父组件通过setHistory更新状态时，会触发父组件及包含DataGrid的子组件重渲染，此时如果filteredData（即rows的来源）没有同步更新为编辑后的新数据，DataGrid会重新渲染初始的filteredData，导致单元格值被重置。
2. 首次与后续渲染差异：首次编辑后，父组件状态更新触发重渲染，filteredData仍为初始值，所以DataGrid重置；后续编辑时，DataGrid内部可能已缓存编辑后的临时状态，或因组件渲染优化未完全重置，但这并非正确的受控模式。

1. 同步更新数据源：在handleFoo中，除了更新history，还要同步更新存储行数据的源状态，确保rows prop始终反映最新的编辑结果：

// 父组件中假设行数据存储在rowsState状态中
const handleFoo = async (newRow) => {
  setHistory(newRow);
  // 替换对应id的行，更新源数据
  setRowsState(prevRows => prevRows.map(row => row.id === newRow.id ? newRow : row));
};

2. 修正useCallback依赖：子组件的processRowUpdate使用useCallback时，依赖数组需包含handleFoo，避免因父组件重渲染导致handleFoo引用过时：

const processRowUpdate = React.useCallback(
  async (newRow) => {
    await handleFoo(newRow);
    return newRow;
  },
  [handleFoo], // 添加handleFoo到依赖数组
);

3. 确保filteredData实时更新：如果filteredData是源数据的过滤结果，需保证源数据更新后，filteredData能重新计算得到最新值。

即使history状态未传递给子组件，父组件状态更新仍会触发子组件重渲染，这是React的默认渲染机制。DataGrid作为受控组件，必须保证rows prop与内部编辑状态一致，否则必然出现值重置问题。

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