反应设置状态使用函数而不是像对象一样合并

Question

每当更改MUI的Data Grid Pro列宽度时，都称之为此功能。我正在尝试从“参数”中捕获“字段”和“宽度”，并为更改宽度的所有列创建一系列对象。我的问题是，它只是不断添加相同的对象而不是合并它们。例如，在下面，我两次更改了“ 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 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]

）；