setInterval无法获取useState更新后的order变量如何解决？

你的定时器在shopId首次更新时创建，通过闭包捕获了当时的order值。后续setOrder更新状态后，定时器内部的闭包仍引用旧的order，因此无法识别到最新值。另外原代码未清理定时器，存在内存泄漏风险，以下是两种可行的解决方法：

方案一：用useRef跟踪最新order值 #

useRef的current属性是可变引用，不会被闭包锁定旧值，能始终获取最新状态：

import { useEffect, useRef } from 'react';

// ...

const orderRef = useRef(order);

// 监听order变化，同步更新ref
useEffect(() => {
  orderRef.current = order;
}, [order]);

useEffect(() => {
  if (!shopId) return;

  const intervalId = setInterval(() => {
    // 使用orderRef.current获取最新的order值
    if (orderRef.current.length === 0) {
      FindCustomer()
        .then(r => JSON.parse(r))
        .then(r => {
          console.log(r, "r");
          const col = r["col"];
          setOrder(col);
        });
    }
  }, 10000);

  // 组件卸载或shopId变化时清理定时器
  return () => clearInterval(intervalId);
}, [shopId]);

方案二：将order加入依赖数组，重启定时器 #

这种方法会在shopId或order变化时重新创建定时器，适合需要立即根据最新order调整逻辑的场景，但每次变化会重置计时：

import { useEffect } from 'react';

// ...

useEffect(() => {
  if (!shopId) return;

  const intervalId = setInterval(() => {
    if (order.length === 0) {
      FindCustomer()
        .then(r => JSON.parse(r))
        .then(r => {
          console.log(r, "r");
          const col = r["col"];
          setOrder(col);
        });
    }
  }, 10000);

  return () => clearInterval(intervalId);
}, [shopId, order]); // 把order添加到依赖数组中

推荐方案一，它不会因order变化打乱定时器的计时节奏，同时能稳定获取最新状态，还解决了内存泄漏问题。

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