使用 function 不合并类似对象的反应设置 state

Question

每当 MUI 的数据网格 pro 列宽发生更改时，都会调用此 function。 我正在尝试从“参数”中捕获“字段”和“宽度”，并为所有已更改宽度的列创建一个对象数组。 我的问题是它只是不断添加相同的 object 而不是合并它们。 例如，在下面我两次更改了“wave”列的宽度，它只是将第二次更改添加到数组中。

我需要帮助正确合并它们

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

  console.log(columnDefinitions);

更新：我想通了。 我认为使用我之前的 function 中的价差有一种更简单的方法。

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

      const check = columnDefinitions.some((e) => e.field === field);

      if (check) {
        const updatedDefs = columnDefinitions.map((column) => {
          if (column.field === field) {
            return { ...column, width: width };
          }

          return column;
        });

        setColumnDefinitions(updatedDefs);
      } else {
        // setColumnDefinitions((columnDefinitions) => {
        //   return [...columnDefinitions, { field: field, width: width }];
        // });

        setColumnDefinitions([
          ...columnDefinitions,
          { field: field, width: width },
        ]);
      }
    },
    [columnDefinitions]
  );

Answer 1

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

  const check = columnDefinitions.some((e) => e.field === field);

  if (check) {
    const updatedDefs = columnDefinitions.map((column) => {
      if (column.field === field) {
        return { ...column, width: width };
      }

      return column;
    });

    setColumnDefinitions(updatedDefs);
  } else {
    
    setColumnDefinitions((columnDefinitions) => {
      return [...columnDefinitions, { field: field, width: width }];
    });

  }
},
[columnDefinitions]

);