材料表示例未按预期工作答案

【问题标题】：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)之类的事情。
同样的问题！你找到方法了吗？

标签： javascript reactjs material-ui material-table

【解决方案1】：

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

我改成：

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

【讨论】：