在我学习React的第二周。
我需要一些帮助来帮助我在模态中单击保存按钮时如何刷新reactJs中的dataTable。
这是我的结构。
我有一个参数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的ParameterDataTable.jsx文件。请注意，在这里，我从DataTable actions属性调用了AddParameter.jsx，如actions={<AddParameter/>}，以添加一个按钮，该按钮显示处理新参数保存的模态表单。
ParameterDatatable.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>
  )
}

下面是我的AddParameter.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，或者调用loadParameters函数，该函数从ParameterDataTable.jsx中的API获取数据
尝试使用reactjs中的导航来尝试重新加载页面，但地址将添加到当前地址，如下所示。