React中PUT请求后表格刷新异常问题及解决方案咨询

我开发了一个提交时切换记录值的表单，需要在数据库数据更新后自动刷新表格，避免用户手动刷新查看更新内容。目前功能存在异常：

• 首次更新记录时，刷新无法捕获变更；
• 再次切换值后，每次切换/刷新都能正常反映变更；
• 选择新记录时问题重复。

我怀疑刷新操作在数据库更新完成前就已触发，后续刷新捕获的是前一次的更新。希望将PUT请求改写为异步命令，确保记录更新成功后再执行refreshTable函数，同时想确认是否是使用refreshKey触发刷新的方式导致了问题。

表单代码 #

export function DeptStatusSwitch(props) {
    const { closeModal, refreshTable, selectedRecord, ltStatusUrl } = props;

    const { values, setValues } = FormFunctions(true);
    const classes = useStyles();
    const item = values; // used for easier referencing (matches table item)

    React.useEffect(() => {
        if (selectedRecord !== null) {
            setValues({
                ...selectedRecord
        }); }
    }, [selectedRecord, setValues]);


// Edit Record
    function editRecordStatus() {
        axios.put(`${ltStatusUrl + (item.id)}`, {
            title: 'Success',
            body: 'The record had been successfully updated'
        });
    }

    const handleSubmit = e => {
        e.preventDefault();
        editRecordStatus();
        closeModal();
        refreshTable();
    };

    return (
        <Form onSubmit={handleSubmit} >
            <Grid container spacing={0} justifyContent='center'>
               <Typography>
                  Are you sure you want to {item.isArchived === 1 ? 'ACTIVATE' : 'DEACTIVATE'} this department?
               </Typography>
            </Grid>
            <Grid container spacing={0} justifyContent='center'>
            <Typography className={classes.boldItalic} >
                  {item.name}
               </Typography>
            </Grid>
            <Grid>
                <div style={{display: 'flex', justifyContent: 'flex-end'}}>
                    <Controls.Button
                        type='submit'
                        text='Confirm'
                        onClick={editRecordStatus}
                    />
                    <Controls.Button
                        text='Cancel'
                        color='default'
                        onClick={closeModal}
                    />
                </div>
            </Grid>
        </Form>
    );
}

表格刷新实现代码 #

// Refresh Table
    const [refreshKey, setRefreshKey] = React.useState(1);
    const refreshTable = () => { setRefreshKey(refreshKey + 1); };


// Fetching Data
React.useEffect(() => {
  const fetchData = async () => {
    setLoading(true);
    try {
    const res = await axios.get(ltReadUrl);
    setTableData( res.data );
    } catch (error) {
    console.error(error.message);
    }
    setLoading(false);
  };
  fetchData();
  }, [setTableData, setLoading, refreshKey]); 

1. 修复PUT请求的异步执行问题 #

你的核心问题是editRecordStatus中的PUT请求是异步操作，但你没有等待它完成就直接调用了refreshTable，导致表格刷新时数据库还没完成更新。需要调整代码确保更新完成后再刷新：

修改后的关键代码：

// 将更新函数改为异步
async function editRecordStatus() {
    await axios.put(`${ltStatusUrl + (item.id)}`, {
        title: 'Success',
        body: 'The record had been successfully updated'
    });
}

// 提交函数也改为异步，等待更新完成
const handleSubmit = async e => {
    e.preventDefault();
    await editRecordStatus();
    closeModal();
    refreshTable();
};

同时注意：提交按钮同时绑定了onClick和type='submit'，会导致editRecordStatus被重复调用，需要去掉onClick属性：

<Controls.Button
    type='submit'
    text='Confirm'
    // 移除 onClick={editRecordStatus}
/>

2. 关于refreshKey触发刷新的方式 #

这种方式本身没有问题，是React中常用的强制刷新数据的手段，你的首次刷新失败和该机制无关，完全是因为PUT请求未完成就触发了刷新。

可以优化refreshTable的写法，避免闭包导致的状态更新异常：

const refreshTable = () => { 
    setRefreshKey(prevKey => prevKey + 1); 
};

内容的提问来源于stack exchange，提问作者Mtullis