React更新MUI Data Grid Pro列宽状态时未正确合并配置对象问题

问题场景 #

每当MUI Data Grid Pro的列宽发生变更时会触发对应的回调函数，从回调入参params中提取field和width属性，即可生成记录所有已调整宽度列的配置对象数组。
初始实现存在逻辑问题：调整同一列宽度时，代码会持续向数组追加新对象，而非合并更新已有同字段的配置。例如先后两次调整wave列的宽度，数组会直接追加第二次变更的对象，而非更新原有记录，异常效果如下：

需求为实现配置对象的正确合并更新，初始错误实现代码如下：

const handleColumnSizeChange = useCallback(
  (params) => {
    setColumnDefinitions((columnDefinitions) => {
      return [
        ...columnDefinitions,
        { field: params.colDef.field, width: params.colDef.width },
      ];
    });
  },
  [columnDefinitions]
);

console.log(columnDefinitions);

实现方案 #

通过判断当前调整列是否已存在于配置数组中，分别执行更新/新增逻辑即可实现需求，完整代码如下：

const handleColumnSizeChange = useCallback(
  (params) => {
    const { field, width } = params.colDef;

    // 校验当前列是否已存在配置记录
    const isColumnExist = columnDefinitions.some((e) => e.field === field);

    if (isColumnExist) {
      // 已存在配置则遍历更新对应列的宽度值
      const updatedDefs = columnDefinitions.map((column) => {
        if (column.field === field) {
          return { ...column, width: width };
        }
        return column;
      });
      setColumnDefinitions(updatedDefs);
    } else {
      // 无对应配置则追加新的列配置项
      setColumnDefinitions([
        ...columnDefinitions,
        { field: field, width: width },
      ]);
      // 推荐使用函数式更新写法，避免闭包导致获取到陈旧状态值：
      // setColumnDefinitions((prev) => [...prev, { field, width }]);
    }
  },
  [columnDefinitions]
);

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