每秒从 api 获取数据

Question

我有一个反应本机应用程序，我正在获取客户发出的订单并将其显示在特定屏幕的餐厅端，我使用 fetch api 来获取数据，因此工作流程是客户优先下订单并将其存储在数据库中和餐厅方面我有这个功能：

  const loadData = async () => {
        const response = await fetch(`${API_URL}/getActiveOrders?ID=${id}`);
        const result = await response.json();
        if (result.auth === true) {

                setCurrentOrders(result.data)

        } else {
            setCurrentOrders([])
        }
    }

    useEffect(() => {
        const interval = setInterval(() => {
            loadData();
        }, 1000)
        return () => clearInterval(interval)
    }, [id]);

就像在这个函数中一样，它每秒运行一次，并且它对 Express 服务器进行 API 调用以从数据库中获取数据，这样我就可以让餐厅毫不延迟地接收订单。但我注意到，当间隔设置为 1 秒时，应用程序会出现滞后，并且它会不断频繁地调用 Express 服务器。

我的问题：这是执行与此场景相同的最佳方法（在客户下订单后立即获取订单）还是有更好的方法可以在不滞后的情况下执行此操作，并且在获取大数据时性能将保持不变一样还是会有一些问题？

Answer 1

如果我不得不猜测滞后问题的原因是什么，那是因为您对钩子有依赖性useEffect。每次状态更新时，它都会触发另一个渲染，效果会再次运行，并设置另一个间隔，并且您的应用程序每秒执行一次此操作。

我建议删除依赖并仅在组件挂载时运行一次效果，并在卸载时清除间隔。

useEffect(() => {
  const interval = setInterval(() => {
    loadData();
  }, 1000)
  return () => clearInterval(interval)
}, []);

如果idGET 请求更新并且您需要最新值，则使用 React ref 来存储该id值并在请求 URL 中使用它。

const idRef = React.useRef(id);

useEffect(() => {
  idRef.current = id;
}, [id]);

const loadData = async () => {
  const response = await fetch(`${API_URL}/getActiveOrders?ID=${idRef.current}`);
  const result = await response.json();
  setCurrentOrders(result.auth ? result.data : []);
}