在MaterialTable中值未更新

问题描述

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

这里缺少什么

有什么建议吗？

请参考下面的代码段

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

解决方法

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

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

更新

如果要禁用特定列，可以将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',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);
          });
        }
      }}
    />
  )
}