useState变量strike在while循环中无法获取更新值的技术咨询

你的核心问题出在两个关键点：

1. 同步while循环阻塞事件循环：同步while会卡死JavaScript线程，导致React无法处理strike的状态更新，新值根本没机会被循环读取。
2. 闭包捕获旧值：调用watchProfit时，闭包会捕获当时的strike值，后续状态更新后，循环里的strike还是旧的引用。

下面是两种可行的修复方案：

方案一：用setInterval异步轮询（推荐） #

把同步while换成异步轮询，让事件循环能处理React的状态更新，每次轮询都能拿到最新的strike值：

// 用ref保存定时器ID，方便后续清理
const intervalRef = useRef(null);

const watchProfit = (response) => {
  // 先清理之前的定时器，防止重复执行
  if (intervalRef.current) {
    clearInterval(intervalRef.current);
  }

  intervalRef.current = setInterval(() => {
    const profitPercentage = calculateProfitPercentage(response.data.avgPrice, strike);
    console.log('Checking profit...', strike);

    if (profitPercentage >= incrementalBuyPercentage) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
      console.log('Profit threshold reached. Proceeding to the next iteration.');
    }
  }, 1000); // 可根据需求调整检查间隔（毫秒）
};

const calculateProfitPercentage = (averageBuyPrice, currPrice) => {
  if (averageBuyPrice === 0) {
    return 0;
  }
  const profit = currPrice - averageBuyPrice;
  return (profit / averageBuyPrice) * 100;
};

// 调用方式
watchProfit(response);

额外注意：组件卸载时要清理定时器，避免内存泄漏：

useEffect(() => {
  return () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
    }
  };
}, []);

方案二：用useRef保存最新的strike值 #

如果需要保留类似循环的逻辑，用useRef存储strike的最新值，这样闭包中能直接访问到更新后的状态：

const strikeRef = useRef(strike);

// 监听strike状态变化，实时更新ref
useEffect(() => {
  strikeRef.current = strike;
}, [strike]);

const watchProfit = (response) => {
  const checkProfit = () => {
    const currentStrike = strikeRef.current;
    const profitPercentage = calculateProfitPercentage(response.data.avgPrice, currentStrike);
    
    if (profitPercentage < incrementalBuyPercentage) {
      console.log('Checking profit...', currentStrike);
      setTimeout(checkProfit, 1000); // 递归调用实现轮询
    } else {
      console.log('Profit threshold reached. Proceeding to the next iteration.');
    }
  };

  checkProfit();
};

const calculateProfitPercentage = (averageBuyPrice, currPrice) => {
  if (averageBuyPrice === 0) {
    return 0;
  }
  const profit = currPrice - averageBuyPrice;
  return (profit / averageBuyPrice) * 100;
};

方案生效原因 #

• 异步轮询（setInterval/setTimeout）不会阻塞事件循环，React有机会处理状态更新，每次轮询都能拿到最新的strike。
• useRef的current属性是可变的，不会被闭包捕获旧值，能始终获取到最新的状态。

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