Question

在Material-UI的网站“表格”页面上，有一个我感兴趣的用于项目的特定表格，称为物料表（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按钮时不会保存更改。

此外，删除似乎总是删除表的最后一行，即使它不是我选择删除的那一行也是如此。但是，添加新行似乎正常。

我该如何解决？

Answer 1

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

我将其更改为：

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

物料表示例未按预期工作

1 个答案: