Javascript 单击模态保存按钮后如何在 ReactJS 中刷新数据表

在我学习的第二周，我做出了react .

当我在模式中单击保存按钮时，我需要一些关于如何在reactJs中刷新DataTable的帮助.

这是我的 struct .

下面有一个参数Maintenance.jsx，用于导入DataTable组件

ParameterMaintenance.jsx

import React from 'react'
import { ParameterDatable } from '../../components/ParameterDatatable'

export const ParameterMaintenance = () => {

  return (
    <div className='container mt-5'>
    <div></div>
    <ParameterDatatable/>
    </div>
  )
}

然后，我有一个保存DataTable的参数DataTable.jsx文件. 注意，在这里，我从 类似于此的DataTable Actions属性actions={<AddParameter/>} 若要添加显示处理保存新参数的模式窗体的按钮，请执行以下操作.

ParameterDatable.jsx

import React, {useState, useEffect} from 'react'
import axios from 'axios';
import DataTable from 'react-data-table-component'; 
import DataTableExtensions from 'react-data-table-component-extensions';
import 'react-data-table-component-extensions/dist/index.css';
import "bootstrap/dist/js/bootstrap.bundle.js";
import "bootstrap/dist/css/bootstrap.css";
import { Link } from "react-router-dom";
import { AddParameter } from './AddParameter';

export const ParameterDatatable= () => {

    const [parameters, setParameters] = useState([]);
    
    useEffect(() => {
        loadParameters();
    }, []);

    
    const loadParameters = async () => {
        const result = await axios.get("http://localhost:8080/parameters");
        setParameters(result.data);
    };
    
    const deleteParam = async (id) => {
        await axios.delete(`http://localhost:8080/parameter/${id}`);
        loadParameters();
    };

    const column = [
        {
          name: "Param Name",
          selector: (row) => row.param_name,
          width: "180px" ,
          sortable: true,
          alignItems: 'center',
          display: 'flex',
        },
        {
          name: "Sequence Number",
          selector: (row) => row.param_sequence_number,
          width: "150px" ,
          sortable: true,
        },
        {
            name: "Parameter Value",
            selector: (row) => row.param_value,
            width: "150px" ,
            sortable: true,
        },
        {
            name: "",
            width: "110px" ,
            cell: row =>  
            <div className="App">
            <div className="openbtn text-center">
              <button
                type="button"
                class="btn btn-danger"
                data-bs-toggle="modal"
                data-bs-target="#myModal"
                
              >
                Delete
              </button>

              <div className="modal" tabindex="-1" id="myModal">
                <div className="modal-dialog">
                  <div className="modal-content">
                    <div className="modal-header">
                      <h5 className="modal-title">Danger</h5>
                      <button
                        type="button"
                        className="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                      ></button>
                    </div>
                    <div className="modal-body">
                      <p>Do you want to remove this record premanently?</p>
                    </div>
                    <div className="modal-footer">
                      <button
                        type="button"
                        className="btn btn-secondary"
                        data-bs-dismiss="modal"
                      >
                        Close
                      </button>
                      <button type="button" className="btn btn-primary" onClick={() => deleteParam(row.param_id)}
                      data-bs-dismiss="modal">
                        Yes
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
                ,
        },
        {
            name: "",
            width: "110px" ,
            cell: row =>  
                    <button
                    className="btn btn-primary mx-2"
                    onClick={() => deleteParam(row.param_id)}>
                      Edit
                </button>,
        },
      ]   
   
  return (
    <div className="datatable">
    <DataTableExtensions
    
    columns={column}
    data={parameters}
    print={false}
    export={false}
  >
    <DataTable 
        title="Parameters"
        columns={column} 
        data={parameters} 
        pagination
        fixedHeader
        fixedHeaderScrollHeight="450px"
        highlightOnHover
        actions={<AddParameter/>}
        
      subHeader

    />
    </DataTableExtensions>
    </div>
  )
}

下面是我的Add参数.jsx，它是保存新参数的模式表单

AddParameter.jsx

import React, {useState} from 'react'
import axios from "axios";
import "bootstrap/dist/js/bootstrap.bundle.js";
import "bootstrap/dist/css/bootstrap.css";
import { Link, useNavigate } from "react-router-dom";

export const AddParameter = () => {

    let navigate = useNavigate();

    const [parameter, setParameter] = useState({
        param_name: "",
        param_sequence_number: "",
        param_value: "",
    });

    const {param_name, param_sequence_number, param_value} = parameter;

    const onInputChange = (e) => {
        setParameter({ ...parameter, [e.target.name]: e.target.value });
      };   

      const onSubmit = async (e) => {
        e.preventDefault();
        console.log("Submitting");
        await axios.post("http://localhost:8080/parameter", parameter);
        navigate('admin/parameter1');

      };   

  return (
    <div>
    <button className="btn btn-sm btn-info"
    data-bs-toggle="modal"
    data-bs-target="#exampleModal">Create New</button>
    <div className="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div className="modal-dialog">
      <div className="modal-content">
        <div className="modal-header">
          <h5 className="modal-title" id="exampleModalLabel">New Parameter</h5>
          <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div className="modal-body">
          <form onSubmit={(e) => onSubmit(e)}>
            <div className="mb-3">
              <label for="recipient-name" className="col-form-label">Parameter Name</label>
              <input type={"text"} className="form-control" placeholder="Param Name" name="param_name" value={param_name}
               onChange={(e) => onInputChange(e)}/>
            </div>
            <div className="mb-3">
              <label for="message-text" className="col-form-label">Sequence Number</label>
              <input type={"text"} className="form-control" placeholder="Sequence Number" name="param_sequence_number" value={param_sequence_number}
               onChange={(e) => onInputChange(e)}/>
            </div>
            <div className="mb-3">
              <label for="message-text" className="col-form-label">Parameter Value</label>
              <input type={"text"} className="form-control" placeholder="Value" name="param_value" value={param_value}
               onChange={(e) => onInputChange(e)}/>
            </div>
            <div className="modal-footer">
            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="submit" className="btn btn-primary" data-bs-dismiss="modal">Save Parameter</button>
            </div>
        </form>
        </div>
      </div>
    </div>
  </div>
  </div>
  )
}

我想要做的是，当我单击保存按钮时，它将关闭模式并刷新数据表，或者调用从参数DataTable.jsx中的API获取数据的load参数函数

Tried to use the navigate in reactjs to try to reload the page but the address will just add to the current address like this.