反应错误：MaterialTable重新渲染过多

问题描述

我正在使用MaterialTable供用户输入数据，然后检查App.tsx中的杆数是否有效（1、2、3 ...）。如果有效，我将拉杆，否则将引发错误。当我正确输入棒时，一切都很好，但是当我以错误的顺序输入棒时，它会引发错误。我知道问题是当我使用setAreRodsOk（false）时，但是我不知道如何解决它。

App.tsx

interface RodsData {
  i: number; 
  L: number;  
  A: number; 
  E: number; 
  S: number; 
  q: number; 
}

function App() {
  const [daTarods,setDaTarods] = useState<Array<RodsData>>([])
  const changeDaTarods = (data: Array<RodsData>) => {setDaTarods(data)}
  const [dataLoads,setDataLoads] = useState<Array<Object>>([])
  const changeDataLoads = (data: Array<Object>) => {setDataLoads(data)}

  const [areRodsOK,setAreRodsOk] = useState<Boolean>(true);
  for (let j: number = 1; j <= daTarods.length; j++) {
    let isOK = daTarods.find((val) => val.i === j);
    if (!isOK) {
     setAreRodsOk(false);
     break;
    }
  };

  return (
    <div>
      <Router>
      <Header />
        <Switch>

          <Route exact path='/'>
            <HomePage />
          </Route>

          <Route path='/pre'>
            <div className="Preprocessor">
              <div className="tables margin">
                <RodsTable data={daTarods}  setData={changeDaTarods}/>
                <LoadsTable data={dataLoads} setData={changeDataLoads}/>
              </div>
              {areRodsOK ?
              <Konva data={daTarods} />
              : (
                <Alert className="alert" severity="error">
                  {' '}
                  <AlertTitle>Ошибка!</AlertTitle> Неправильная нумерация стержней{' '}
                </Alert>)}
            </div>
          </Route>

          <Route path='/pro'>
            <h1>Processor</h1>
          </Route>

          <Route path='/post'>
            <h1>Postprocessor</h1>
          </Route>

        </Switch>
      </Router>
    </div>
  );
}

export default App;

RodsTable.js

export default function LastHope(props) {
  return (
      <div className="TableRods">
        <MaterialTable
          columns={[
            {
              title: 'Rod number',field: 'i',type: 'numeric',filtering: false,align: 'center',},/-- more columns --/
           ]}

          data={props.data}
          title="Стержни"
          icons={{
            Add: props => <AddIcon />,Edit: props => <EditIcon />,Delete: props => <DeleteIcon />,Clear: props => <DeleteIcon />,Check: props => <CheckIcon />,Search: props => <SearchIcon />,ResetSearch: props => <DeleteIcon />
          }}

          editable={{
            onRowAdd: newData => {
              return new Promise((resolve,reject) => {
                setTimeout(() => {
                  props.setData([...props.data,newData]);
  
                  resolve();
                },1000);
              })},onRowUpdate: (newData,oldData) =>
              new Promise((resolve,reject) => {
                setTimeout(() => {
                  const dataUpdate = [...props.data];
                  const index = oldData.tableData.id;
                  dataUpdate[index] = newData;
                  props.setData([...dataUpdate]);

                  resolve();
                },1000);
              }),onRowDelete: oldData =>
              new Promise((resolve,reject) => {
                setTimeout(() => {
                  const dataDelete = [...props.data];
                  const index = oldData.tableData.id;
                  dataDelete.splice(index,1);
                  props.setData([...dataDelete]);

                  resolve();
                },1000);
              })
          }}
        />
        </div>
  );
}

The picture of mistake should help

固定的代码将非常感谢，谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）