时间戳

首页 > 解决方案 > 材料表示例未按预期工作

javascript - 材料表示例未按预期工作

问题描述

在 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);
          }),
      }}
    />
  );
}

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

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

我怎样才能解决这个问题？

标签： javascriptreactjsmaterial-uimaterial-table

解决方案

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

我把它改成：

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

推荐阅读