材料表添加行后防止状态更新答案

【问题标题】：material-table Prevent State Update After Adding Row材料表添加行后防止状态更新
【发布时间】：2020-10-07 16:41:40
【问题描述】：

使用材料表库，我试图在添加行时呈现不同的组件。下面的代码按预期工作；但是，我在控制台中收到以下错误： 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.有没有办法强制material-table在添加一行后不更新状态？

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>;
  }
}

【问题讨论】：

标签： javascript reactjs material-ui material-table

【解决方案1】：

不，目前不可能。

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

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

【讨论】：