React+Axios实现数据库数据变更实时同步展示的方法咨询

你的组件目前只在挂载时执行一次GET请求，所以数据库数据更新后页面无法自动刷新，以下是几种可行的实现方案：

1. 定时轮询（简单易实现） #

适合对实时性要求不高的场景，每隔固定时间主动拉取最新数据：

export function Wareh() {
  const [wareh, setWareh] = useState([{}]);

  useEffect(() => {
    // 封装请求数据的函数
    const fetchWarehData = () => {
      axios.get("http://localhost:1515/wareh")
        .then((response) => {
          setWareh(response.data);
        })
        .catch(err => console.error('请求仓库数据失败:', err));
    };

    // 组件挂载时先请求一次
    fetchWarehData();

    // 设置定时器，每30秒刷新一次（时间可根据需求调整）
    const timer = setInterval(fetchWarehData, 30000);

    // 组件卸载时清理定时器，避免内存泄漏
    return () => clearInterval(timer);
  }, []);

  return wareh;
}

优点：无需修改后端，代码改动小；缺点：存在数据延迟，频繁请求会增加服务器负载。

2. WebSocket实时推送（实时性强） #

适合需要即时同步数据的场景，后端在数据库数据变更时主动向前端推送消息，前端收到消息后触发数据刷新：

export function Wareh() {
  const [wareh, setWareh] = useState([{}]);

  useEffect(() => {
    const fetchWarehData = () => {
      axios.get("http://localhost:1515/wareh")
        .then((response) => {
          setWareh(response.data);
        })
        .catch(err => console.error('请求仓库数据失败:', err));
    };

    // 首次加载数据
    fetchWarehData();

    // 建立WebSocket连接（需后端提供对应WebSocket服务）
    const socket = new WebSocket('ws://localhost:1515/wareh-ws');

    // 监听后端推送的更新消息
    socket.onmessage = (event) => {
      // 假设后端推送'wareh-updated'表示数据已变更
      if (event.data === 'wareh-updated') {
        fetchWarehData();
      }
    };

    // 组件卸载时关闭WebSocket连接
    return () => socket.close();
  }, []);

  return wareh;
}

优点：实时性高，无无效请求；缺点：需要后端支持WebSocket，实现复杂度较高。

3. 数据更新操作后主动刷新 #

如果前端存在触发数据库更新的操作（比如新增、修改仓库数据），可以在操作成功后立即重新拉取数据：

export function Wareh() {
  const [wareh, setWareh] = useState([{}]);

  const fetchWarehData = () => {
    axios.get("http://localhost:1515/wareh")
      .then((response) => {
        setWareh(response.data);
      })
      .catch(err => console.error('请求仓库数据失败:', err));
  };

  useEffect(() => {
    fetchWarehData();
  }, []);

  // 示例：修改仓库数据的函数
  const updateWareh = (id, newData) => {
    axios.put(`http://localhost:1515/wareh/${id}`, newData)
      .then(() => {
        // 更新成功后立即刷新数据
        fetchWarehData();
      })
      .catch(err => console.error('更新仓库数据失败:', err));
  };

  return wareh;
}

优点：精准触发刷新，无冗余请求；缺点：仅适用于前端能控制数据更新时机的场景。

4. 全局状态管理（大型应用推荐） #

如果是大型React应用，可以用Redux等状态管理工具统一管理数据，当数据需要更新时，通过全局状态更新触发组件刷新：

第一步：定义Redux Slice #

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

// 异步请求数据的action
export const fetchWareh = createAsyncThunk('wareh/fetch', async () => {
  const response = await axios.get("http://localhost:1515/wareh");
  return response.data;
});

const warehSlice = createSlice({
  name: 'wareh',
  initialState: [{}],
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchWareh.fulfilled, (state, action) => {
      return action.payload;
    });
  }
});

export default warehSlice.reducer;

第二步：在组件中使用 #

import { useDispatch, useSelector } from 'react-redux';
import { fetchWareh } from './warehSlice';

export function Wareh() {
  const wareh = useSelector(state => state.wareh);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchWareh());
  }, [dispatch]);

  // 其他组件需要刷新数据时，只需调用dispatch(fetchWareh())即可
  return wareh;
}

优点：适合多组件共享数据的场景，统一管理数据状态；缺点：需要引入状态管理工具，增加项目复杂度。

内容的提问来源于stack exchange，提问作者Red bad coder