反应 setState 不更新 AG Grid onCellValueChanged 回调中的状态答案

【问题标题】：React setState not updating state in AG Grid onCellValueChanged callback反应 setState 不更新 AG Grid onCellValueChanged 回调中的状态
【发布时间】：2021-05-02 14:00:54
【问题描述】：

我在我的 React.js 项目中使用 Ag Grid。如果单元格值发生变化，我想增加 count 值。我将我的handleChange 函数传递给onCellValueChanged callBack。每次单元格值更改时都会触发我的handleChange 函数，但问题是count 值始终为0，无论通过setState(count + 1) 更新它。有人可以帮忙吗？

我在 StackBlitz 上发布了一个示例来重现此问题：
https://stackblitz.com/edit/ag-grid-react-hello-world-zmsvf5?embed=1&file=index.js

【问题讨论】：

标签： javascript reactjs ag-grid

【解决方案1】：

我想我找到了解决方法on ag-grid issue。

基本上调用setCount的时候需要使用函数回调，这样才能使用到实际的状态。

function handleChange() {
  setCount(count => count + 1);
}

Updated code

【讨论】：

【解决方案2】：

你的问题是在没有useEffect的情况下执行de loading函数。这会导致重新渲染过多，因为在每个 setRowData 中，组件都会重新渲染。

这是解决方案：

    function loadDataFromServer() {
    setTimeout(() => {
      setRowData([{ make: "Toyota" }, { make: "Toyota" }, { make: "Toyota" }]);
    }, 1000);
  }

  useEffect(() => {
    setCount(prevCount => prevCount + 1);
  }, [rowData]);

  useEffect(() => {
    loadDataFromServer();
  }, []);

  // function handleChange() {
  //   //here Count will always remain 0 (the value provided initially)
  //   console.log("Count => ", count);
  //   setCount(count + 1);
  // }

  return (
    <div>
      <h1>Count Changes: {count}</h1>
      <div className="ag-theme-alpine" style={{ height: 400 }}>
        <AgGridReact rowData={rowData}>
          <AgGridColumn
            field="make"
            editable={true}
            // onCellValueChanged={handleChange}
          />
        </AgGridReact>
      </div>
    </div>
  );
};

【讨论】：

这行不通。因为你没有捕捉到单元格的变化。
另外，您正在 useEffect 挂钩中调用 loadDataFromServer() ，而没有任何依赖关系。每次 UI 渲染时，它都会从服务器加载数据。