材料表示例未按预期工作

Posted 2023-02-22

【中文标题】材料表示例未按预期工作

【英文标题】：Material-table example doesn't work as intended

【发布时间】：2020-03-08 17:25:50

【问题描述】：

在 Material-UI 的网站表格页面中，有一个我有兴趣用于项目的特定表格，标记为 material-table (https://material-ui.com/components/tables/#material-table)。它有一个搜索栏，一个用于添加新行的按钮，以及编辑或删除现有行的可能性，也可以通过按钮。在该站点中，一切正常，但提供的源代码却没有，我不知道为什么。

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

export default function MaterialTableDemo() 
  const [state, setState] = React.useState(
    columns: [
       title: 'Name', field: 'name' ,
       title: 'Surname', field: 'surname' ,
       title: 'Birth Year', field: 'birthYear', type: 'numeric' ,
      
        title: 'Birth Place',
        field: 'birthCity',
        lookup:  34: 'İstanbul', 63: 'Şanlıurfa' ,
      ,
    ],
    data: [
       name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 ,
      
        name: 'Zerya Betül',
        surname: 'Baran',
        birthYear: 2017,
        birthCity: 34,
      ,
    ],
  );

  return (
    <MaterialTable
      title="Editable Example"
      columns=state.columns
      data=state.data
      editable=
        onRowAdd: newData =>
          new Promise(resolve => 
            setTimeout(() => 
              resolve();
              setState(prevState => 
                const data = [...prevState.data];
                data.push(newData);
                return  ...prevState, data ;
              );
            , 600);
          ),
        onRowUpdate: (newData, oldData) =>
          new Promise(resolve => 
            setTimeout(() => 
              resolve();
              if (oldData) 
                setState(prevState => 
                  const data = [...prevState.data];
                  data[data.indexOf(oldData)] = newData;
                  return  ...prevState, data ;
                );
              
            , 600);
          ),
        onRowDelete: oldData =>
          new Promise(resolve => 
            setTimeout(() => 
              resolve();
              setState(prevState => 
                const data = [...prevState.data];
                data.splice(data.indexOf(oldData), 1);
                return  ...prevState, data ;
              );
            , 600);
          ),
      
    />
  );

上面的代码是网站上显示的代码。然而，当我尝试使用它时，虽然 Edit 按钮允许我更改所选行的字段，但当我使用 Save 按钮时更改不会保存。

此外，Delete 似乎总是删除表格的最后一行，即使它不是我选择删除的那一行。但是，添加新行似乎可以正常工作。

我该如何解决这个问题？

【问题讨论】：

您可能希望通过控制台记录data.indexOf(oldData) 的值，因为我怀疑它不像您想要的那样工作。你可能想做data.findIndex(e => e.name === oldData.name)之类的事情。

同样的问题！你找到方法了吗？

【参考方案1】：

const data = [...prevState.data];
data[data.indexOf(oldData)] = newData;     

我改成：

const foundIndex = oldData.findIndex(x => x.name === newData.name)
data[foundIndex] = newData
return data