Reactjs 物料表无法更新

我正在使用Material Table创建一个表，该表从我制作的API加载数据。加载页面时，表将正确加载并显示数据。但一旦我尝试编辑和更新数据，所有数据都会丢失，并且会显示一条消息，表示没有数据显示在表上。我做错了什么

我的代码：

import React, { useState, useEffect } from "react";
import "./Complaints.css";
import { API } from "aws-amplify";
import MaterialTable from 'material-table';

export default function Complaints(props) {

    const [complaint, setComplaint] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [isInEditMode, setIsEditMode] = useState(false);
    const [defaultValue, setDefaultValue] = useState("");
    const [state, setState] = useState({
        columns: [
            { title: 'Customer ID', field: 'id', editable: 'never' },
            { title: 'Issue', field: 'complaintName', editable: 'never' },
            { title: 'Description', field: 'complaintDescription', editable: 'never'},
            { title: 'Order ID', field: 'complaintOrderId', editable: 'never'},
            { title: 'Submitted', field: 'createdAt', editable: 'never'},
            { title: 'Updated', field: 'updatedAt', editable: 'date'},
            { title: 'Admin Comment', field: 'adminComment', editable: 'onUpdate'},
        ],
        complaint: []
    });

    var columsArr = [
        { title: 'Customer ID', field: 'id', editable: 'never' },
        { title: 'Issue', field: 'complaintName', editable: 'never' },
        { title: 'Description', field: 'complaintDescription', editable: 'never'},
        { title: 'Order ID', field: 'complaintOrderId', editable: 'never'},
        { title: 'Submitted', field: 'createdAt', editable: 'never'},
        { title: 'Updated', field: 'updatedAt', editable: 'date'},
        { title: 'Admin Comment', field: 'adminComment', editable: 'onUpdate'},
    ];

    useEffect(() => {
        async function onLoad() {
            if (!props.isAuthenticated) {
                return;
            }

            try {
                const complaint = await loadComplaint();
                setComplaint(complaint);
                setState({
                    columns: [state.columns, ...columsArr],
                    complaint: [...state.complaint, ...complaint]
                });
                console.log(complaint)
            } catch (e) {
                alert(e);
            }

            setIsLoading(false);
        }

        onLoad();
    }, [props.isAuthenticated]);

    function loadComplaint() {
        return API.get("kleen", "/Complaint");
    }

    // function edit(adminComment) {
    //     setIsEditMode(true);
    //     setDefaultValue(adminComment);
    //     console.log("value is"+ adminComment);
    // }

    // function updateComplaint() {
    //     return API.put("kleen", `/Complaint/${props.}`);
    // }

    return (
        <MaterialTable style={{
            marginTop: "8rem",
            marginLeft: "auto",
            marginRight: "auto",
            position: "sticky",
        }}
            title="Complaints"
            columns={state.columns}
            data={state.complaint}
            editable={{
                onRowUpdate: (newData, oldData) =>
                    new Promise(resolve => {
                        setTimeout(()=> {
                            {
                                const data = state.complaint;
                                const index = data.indexOf(oldData);
                                data[index] = newData;
                                setState({data}, () => resolve());
                            }
                            resolve()
                        }, 1000)
                        })
            }}
        />
    );
}

import React，{useState，useffect}来自“React”；
导入“/Complaints.css”；
从“aws放大”导入{API}；
从“物料表”导入物料表；
导出默认功能投诉（道具）{
const[complaint，setComplaint]=useState（[]）；
const[isLoading，setIsLoading]=useState（true）；
const[isInEditMode，setIsEditMode]=useState（false）；
常量[defaultValue，setDefaultValue]=useState（“”）；
常量[状态，设置状态]=使用状态({
栏目：[
{标题：'Customer ID'，字段：'ID'，可编辑：'never'}，
{标题：'Issue'，字段：'complaintName'，可编辑：'never'}，
{标题：'Description'，字段：'complaintDescription'，可编辑：'never'}，
{title:'Order ID'，field:'complaintOrderId'，可编辑：'never'}，
{标题：'Submitted'，字段：'createdAt'，可编辑：'never'}，
{标题：'Updated'，字段：'updatedAt'，可编辑：'date'}，
{标题：'Admin Comment'，字段：'adminComment'，可编辑：'onUpdate'}，
],
投诉：[]
});
变量columsArr=[
{标题：'Customer ID'，字段：'ID'，可编辑：'never'}，
{标题：'Issue'，字段：'complaintName'，可编辑：'never'}，
{标题：'Description'，字段：'complaintDescription'，可编辑：'never'}，
{title:'Order ID'，field:'complaintOrderId'，可编辑：'never'}，
{标题：'Submitted'，字段：'createdAt'，可编辑：'never'}，
{标题：'Updated'，字段：'updatedAt'，可编辑：'date'}，
{标题：'Admin Comment'，字段：'adminComment'，可编辑：'onUpdate'}，
];
useffect（（）=>{
异步函数onLoad（）{
如果（！props.isAuthenticated）{
返回；
}
试一试{
const投诉=等待加载投诉（）；
投诉（投诉）；
设定状态({
列：[state.columns，…columnsar]，
投诉：[…陈述.投诉，…投诉]
});
控制台日志（投诉）
}捕获（e）{
警报（e）；
}
设置加载（假）；
}
onLoad（）；
}，[props.isAuthenticated]）；
函数loadComplaint（）{
返回API.get（“kleen”，“投诉”）；
}
//函数编辑（adminComment）{
//setIsEditMode（true）；
//setDefaultValue（adminComment）；
//log（“值为”+adminComment）；
// }
//函数updateComplaint（）{
//返回API.put（“kleen”，`/Complaint/${props.}`）；
// }
返回(
新承诺（解决=>{
设置超时（（）=>{
{
const data=state.complaint；
const index=data.indexOf（旧数据）；
数据[索引]=新数据；
setState（{data}，（）=>resolve（））；
}
解决（）
}, 1000)
})
}}
/>
);
}

编辑前的表格：

保存编辑后的表：

---

恐怕您的代码中有不少错误

首先，由于您将投诉保存在自己的useState和第二个useState（带列）中，因此您有重复的数据。由于您从未在状态中保存任何内容，因此可以将其删除

还可以在每个渲染上创建一个新的列变量，但在useState中已经有相同的对象。下载条目后，您可以访问以下列，这样可以减少重复：

setState(prevState => ({
         ...prevState,
          complaint: [...state.complaint, ...complaint]
  }));

您还使用了两次投诉变量名，这应该避免

您需要将数据分散到数组中，而不是像下面这样的setState中的对象：

setState（prevState=>（{…prevState，…data}），（）=>resolve（）或创建一个如下所示的对象：

{
   data: Your_data_array
}

并将其设置为当前状态。您失去了列值和数据值，它们不再是可访问的。
材质表无法读取此对象，因为它需要数组

试试看它是否有效。
恐怕您的代码中有不少bug

首先，由于您将投诉保存在自己的useState和第二个useState（带列）中，因此您有重复的数据。由于您从未在状态中保存任何内容，因此可以将其删除

还可以在每个渲染上创建一个新的列变量，但在useState中已经有相同的对象。下载条目后，您可以访问以下列，这样可以减少重复：

setState(prevState => ({
         ...prevState,
          complaint: [...state.complaint, ...complaint]
  }));

您还使用了两次投诉变量名，这应该避免

您需要将数据分散到数组中，而不是像下面这样的setState中的对象：
setState（prevState=>（{…prevState，…data}），（）=>resolve（）或创建一个如下所示的对象：

{
   data: Your_data_array
}

并将其设置为当前状态。您失去了列值和数据值，它们不再是可访问的。
材质表无法读取此对象，因为它需要数组

试试看它是否有效。
如果您从父组件向表提供数据：

state.data-表的数据数组

static getDerivedStateFromProps(props, state) {
    // Any time the current user changes,
    // Reset any parts of state that are tied to that user.
    // In this simple example, that's just the email.
    if (props.data !== state.data) {
        return {
            data: props.data,
        };
    }
    return null;
}

    render() {
    return (
        <MaterialTable
            title={<h1>All the leads</h1>}
            columns={this.state.columns}
            data={this.state.data}..........

静态getDerivedStateFromProps（props，state）{
//只要当前用户发生更改，
//重置与该用户关联的任何状态部分。
//在这个简单的例子中，这只是电子邮件。
if（props.data！==state.data）{