ReactJS中点击模态框保存按钮后刷新DataTable的方法

核心问题是子组件AddParameter无法通知父组件ParameterDatatable刷新数据，同时navigate使用相对路径导致路径叠加。以下是具体修复步骤：

1. 通过回调函数实现父子组件通信 #

给AddParameter传递一个回调函数，当参数保存成功后，触发父组件的loadParameters方法重新获取数据：

修改ParameterDatatable.jsx的actions部分 #

// 原代码
actions={<AddParameter/>}
// 修改为
actions={<AddParameter onSaveSuccess={loadParameters} />}

修改AddParameter.jsx #

• 接收父组件传递的onSaveSuccess回调
• 在保存成功后调用该回调，同时修复navigate的绝对路径问题：

export const AddParameter = ({ onSaveSuccess }) => { // 接收回调props
    let navigate = useNavigate();

    // ... 其他代码不变

    const onSubmit = async (e) => {
        e.preventDefault();
        console.log("Submitting");
        await axios.post("http://localhost:8080/parameter", parameter);
        onSaveSuccess(); // 触发父组件刷新数据
        navigate('/admin/parameter1'); // 用绝对路径（开头加/）避免路径叠加
    };   

    // ... 其他代码不变
}

2. 问题根源说明 #

• 路径叠加问题：navigate('admin/parameter1')是相对路径，会在当前页面路径后追加，比如当前路径是/admin/parameter1，执行后会变成/admin/parameter1/admin/parameter1。使用绝对路径navigate('/admin/parameter1')就能跳转到正确的根路径下的目标页面。
• 组件通信问题：AddParameter作为子组件，默认无法直接调用父组件的loadParameters方法，通过传递回调函数是React中父子组件通信的常用方式，能在子组件完成操作后通知父组件更新状态。

额外优化建议 #

可以在loadParameters里添加错误处理，避免请求失败导致的异常：

const loadParameters = async () => {
    try {
        const result = await axios.get("http://localhost:8080/parameters");
        setParameters(result.data);
    } catch (error) {
        console.error("加载参数失败：", error);
        // 可添加用户提示，比如alert或全局toast
    }
};

内容的提问来源于stack exchange，提问作者Joseph Kyle Diel Mahasol