在 AG Grid onCellValueChanged 回调中反应 setState 不更新 state

Question

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

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

Answer 1

我想我找到了关于 ag-grid 问题的解决方法。

基本上，您需要在调用setCount时使用 function 回调，以便使用实际的 state。

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

更新代码

Answer 2

你的问题是在没有useEffect的情况下执行de loading function。 它会导致过多的重新渲染，因为在每个 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>
  );
};