javascript - 每秒从 api 获取数据

Question

我有一个 React Native 应用程序，我在其中获取客户的订单并在特定屏幕的餐厅一侧显示它们，我正在使用 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]);

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

我的问题:这是执行与这种情况相同的最佳方法(在客户下订单时获取订单)还是有更好的方法来做到这一点而不会滞后因为在获取大数据时性能会保持不变还是会出现一些问题？

Answer 1

如果我不得不猜测滞后问题的原因是什么，那将是因为您依赖于 useEffect Hook 。每次状态更新都会触发另一个渲染，效果再次运行，并设置另一个间隔，您的应用每秒执行一次。

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

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

如果 GET 请求的 id 更新并且您需要最新的值，则使用 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 : []);
}