MaterialTable 中的值未更新

Question

我尝试编辑值并更新相同的值，但它没有在 MaterialTable 中更新 以下是我引用的链接 https://material-table.com/#/docs/features/editable 在此我指的是单元格可编辑示例

这里缺少什么

有什么建议吗？

请参考下面的sn-p

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

export default function CellEditable() {
  const { useState } = React;

  const [columns, setColumns] = useState([
    { title: "Name", field: "name" },
    {
      title: "Surname",
      field: "surname",
      initialEditValue: "initial edit value"
    },
    { title: "Birth Year", field: "birthYear", type: "numeric" },
    {
      title: "Birth Place",
      field: "birthCity",
      lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
    }
  ]);

  const [data, setData] = useState([
    { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
    { name: "Zerya Betül", surname: "Baran", birthYear: 2017, birthCity: 34 }
  ]);

  return (
    <MaterialTable
      title="Cell Editable Preview"
      columns={columns}
      data={data}
      cellEditable={{
        onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
          return new Promise((resolve, reject) => {
            console.log("newValue: " + newValue);
            setTimeout(resolve, 1000);
          });
        }
      }}
    />
  );
}

Answer 1

您使用的代码从不设置状态，它只是记录到控制台。

您需要在某个时候设置状态。虽然我不确定这是否是正确的方法，但我能够做到这一点。

更新

如果您希望禁用特定列，可以将editable: 'never' 添加到特定列。请参阅下面我将其添加到 birthYear 的位置。

function CellEditable() {
  const { useState } = React;

  const [columns, setColumns] = useState([
    { title: 'Name', field: 'name' },
    { title: 'Surname', field: 'surname', initialEditValue: 'initial edit value' },
    { title: 'Birth Year', field: 'birthYear', type: 'numeric', editable: 'never' },
    {
      title: 'Birth Place',
      field: 'birthCity',
      lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
    },
  ]);

  const [data, setData] = useState([
    { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
    { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
  ]);

  return (
    <MaterialTable
      title="Cell Editable Preview"
      columns={columns}
      data={data}
      cellEditable={{
        onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
          return new Promise((resolve, reject) => {
            const clonedData = [ ...data ]
            clonedData[rowData.tableData.id][columnDef.field] = newValue
            setData(clonedData)
            
            setTimeout(resolve, 1000);
          });
        }
      }}
    />
  )
}