CRUD操作后如何更新react js中的Material表？

如何解决CRUD操作后如何更新react js中的Material表？

我使用了材料表（代码附加在下面）并尝试查找许多参考资料，但找不到适合我的问题的解决方案。该表显示正常，但是当添加、更新任何数据时问题就开始了。除非刷新页面，否则它不会得到反映。我尝试过的几种方法是更新状态，但无济于事。

import React,{ useState,useEffect } from "react";
import axios from "axios";
import { Button,Modal,TextField,Container } from "@material-ui/core";
import MaterialTable from "material-table";
import { makeStyles } from "@material-ui/core/styles";

const baseUrl =
  "http:localhost:5000/designation/";

const columns = [
  { title: "name",field: "name" },{ title: "descrpition",field: "description" },];

const useStyles = makeStyles((theme) => ({
  modal: {
    position: "absolute",width: 400,backgroundColor: theme.palette.background.paper,border: "2px solid #000",BoxShadow: theme.shadows[5],padding: theme.spacing(2,4,3),top: "50%",left: "50%",transform: "translate(-50%,-50%)",},iconos: {
    cursor: "pointer",inputMaterial: {
    width: "100%",}));

export default function test() {
  const styles = useStyles();
  const [data,setData] = useState([]);
  const [modalAddDesignation,setModalAddDesignation] = useState(false);
  const [moDaleditDesignation,setMoDaleditDesignation] = useState(false);

  const [designation,setDesignation] = useState({
    id: "",name: "",description: "",});

  const handleChange = (e) => {
    const { name,value } = e.target;
    setDesignation((prevstate) => ({
      ...prevstate,[name]: value,}));
  };

  const allDesignation = async () => {
    await axios.get(baseUrl).then((response) => {
      console.log(response.data);
      setData(response.data);
    });
  };

  const addNewDesignation = async () => {
    await axios.post(baseUrl,designation).then((response) => {
      setData(data.concat(response.data));
      console.log(data.concat);
      openclosemodalAddDesignation();
    });
  };

  const editDesignation = async () => {
    await axios.put(baseUrl + designation.id,designation).then((response) => {
      var datanew = data;
      datanew.map((designation) => {
        if (designation.id === designation.id) {
          designation.name = designation.name;
          designation.description = designation.description;
        }
      });
      setData(datanew);
      openclosemoDaleditDesignation();
    });
  };

  const designationopen = (designation,cast) => {
    setDesignation(designation);
    cast === "Edit" && setMoDaleditDesignation(true);
  };

  const openclosemodalAddDesignation = () => {
    setModalAddDesignation(!modalAddDesignation);
  };

  const openclosemoDaleditDesignation = () => {
    setMoDaleditDesignation(!moDaleditDesignation);
  };
  useEffect(async () => {
    await allDesignation();
     await editDesignation();
  },[]);

  const bodyDesignationAdd = (
    <div className={styles.modal}>
      <h3>Add Designation</h3>

      <TextField
        name="name"
        className={styles.inputMaterial}
        label="Designation"
        onChange={handleChange}
      />
      <br />
      <TextField
        name="description"
        className={styles.inputMaterial}
        label="Description"
        onChange={handleChange}
      />
      <br />
      <br />
      <div align="right">
        <Button color="primary" onClick={() => addNewDesignation()}>
          Create
        </Button>
        <Button color="primary" onClick={openclosemodalAddDesignation}>
          Cancel
        </Button>
      </div>
    </div>
  );

  const bodyDesignationEdit = (
    <div className={styles.modal}>
      <h3>Edit Designation</h3>
      <TextField
        name="name"
        className={styles.inputMaterial}
        label="Designation"
        onChange={handleChange}
        value={designation && designation.name}
      />
      <br />
      <TextField
        name="description"
        className={styles.inputMaterial}
        label="Description"
        onChange={handleChange}
        value={designation && designation.description}
      />
      <br />
      <br />
      <div align="right">
        <Button color="primary" onClick={() => editDesignation()}>
          Update
        </Button>
        <Button color="primary" onClick={openclosemoDaleditDesignation}>
          Cancel
        </Button>
      </div>
    </div>
  );

  return (
    <>
      <Container>
        <Button color="primary" onClick={openclosemodalAddDesignation}>
          Create
        </Button>
        <MaterialTable
          columns={columns}
          data={data}
          actions={[
            {
              icon: "edit",tooltip: "Edit",onClick: (event,rowData) => designationopen(rowData,"Edit"),{
              icon: "delete",tooltip: "Delete",rowData) => (rowData,"Delete"),]}
          options={{
            actionsColumnIndex: -1,}}
          localization={{
            header: {
              actions: "Action",}}
        />

        <Modal
          open={modalAddDesignation}
          onclose={openclosemodalAddDesignation}
        >
          {bodyDesignationAdd}
        </Modal>
        <Modal
          open={moDaleditDesignation}
          onclose={openclosemoDaleditDesignation}
        >
          {bodyDesignationEdit}
        </Modal>
      </Container>
    </>
  );
}

解决方法

首先，您的调用在您的变量声明中有 CORS error 和第二个问题，例如 designation.id === designation.id

Blow 代码替换以解决您的两个问题，现在数据更新了两个请求

const addNewDesignation = async () => {
    await axios.post(baseUrl,designation).then((response) => {
      const newData = data.concat(response.data)
      setData(newData);
      openclosemodalAddDesignation();
    });
  };

  const editDesignation = async () => {
    await axios.put(baseUrl + designation.id,designation,{headers: {
      "Access-Control-Allow-Origin": "*"
    }}).then((response) => {
      const dataNew = [...data];
      dataNew.map((_designation) => {
        if (_designation.id === designation.id) {
          _designation.name = designation.name;
          _designation.description = designation.description;
        }
      });
      setData(dataNew);
      openclosemodalEditDesignation();
    });
  };