使用Axios和React Table时，增删Django数据库数据后表格不更新？

问题原因 #

你的代码里useEffect的依赖数组是空的，这意味着仅在组件首次挂载时执行一次数据请求。当你通过管理面板修改数据库数据后，前端没有主动重新请求接口，所以表格数据不会更新。

解决方案 #

下面提供两种常用的解决方式，根据你的场景选择：

方式1：定时轮询（适合无法感知后端数据变化的场景） #

设置固定间隔自动重新请求接口，确保数据同步：

const [data, setData] = useState([]);

useEffect(() => {
    const fetchData = async () => {
        try {
            const response = await axios.get('/api/data');
            setData(response.data);
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    };

    // 首次加载数据
    fetchData();
    // 每5秒重新请求一次，可根据需求调整间隔
    const interval = setInterval(fetchData, 5000);

    // 组件卸载时清除定时器
    return () => clearInterval(interval);
}, []);

方式2：手动触发刷新（适合前端可感知操作的场景） #

如果后续会在前端添加增删改按钮，可以添加一个刷新状态变量，手动触发重新请求：

const [data, setData] = useState([]);
const [refreshTrigger, setRefreshTrigger] = useState(0);

const fetchData = async () => {
    try {
        const response = await axios.get('/api/data');
        setData(response.data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
};

useEffect(() => {
    fetchData();
}, [refreshTrigger]); // 依赖refreshTrigger，变化时重新请求

// 调用这个函数触发刷新（比如前端操作完成后调用）
const handleRefresh = () => {
    setRefreshTrigger(prev => prev + 1);
};

注意事项 #

• 定时轮询的间隔不要设置过短，避免给后端造成不必要的压力。
• 如果需要更实时的同步，可以考虑使用Django Channels配合WebSocket实现双向通信，不过复杂度会更高。

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