添加行后防止 State 更新

Question

使用材料表库，我试图在添加行时呈现不同的组件。 下面的代码按预期工作； 但是，我在控制台中收到以下错误： Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. 有没有办法强制材料表在添加一行后不更新 state？

https://codesandbox.io/s/silly-morse-gy8nu?file=/src/App.js

import React from "react";
import MaterialTable from "material-table";

export default function App() {
  const [displayTable, setDisplayTable] = React.useState(true);

  if (displayTable) {
    return (
      <MaterialTable
        columns={[
          { title: "Adı", field: "name" },
          { title: "Soyadı", field: "surname" },
          { title: "Doğum Yılı", field: "birthYear", type: "numeric" },
          {
            title: "Doğum Yeri",
            field: "birthCity",
            lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
          }
        ]}
        editable={{
          onRowAdd: newData =>
            new Promise((resolve, reject) => {
              setDisplayTable(false);
              resolve();
            })
        }}
        data={[
          {
            name: "Mehmet",
            surname: "Baran",
            birthYear: 1987,
            birthCity: 63
          }
        ]}
        title="Demo Title"
      />
    );
  } else {
    return <p>Test</p>;
  }
}

Answer 1

不，这是目前不可能的。

但是您可以等待表格解决并稍后调用隐藏组件：

 onRowAdd: newData =>
            new Promise((resolve, reject) => {
              resolve();
              setTimeout(() =>  setDisplayTable(false), 50)
            })