React中检测Prop值变化：游戏回合切换价格波动实现问题

你当前的代码逻辑存在问题：hasTurnChanged = props.turn % 2 == 1只是判断当前回合是否为奇数，并不是检测回合是否发生了变化。这会导致只有奇数回合才触发价格波动，而不是每次点击Turn按钮（回合切换）都触发。

下面是两种简单的实现方案，按需选择：

方案1：用useEffect监听回合变化（推荐） #

利用React的useEffect钩子监听props.turn的变化，每次回合切换时自动更新价格：

import { useEffect, useState } from 'react';

function YourGameComponent(props) {
  const [bestPrice, setBestPrice] = useState(props.price);

  // 每次turn或price变化时，重新计算波动价格
  useEffect(() => {
    const newFluctuatedPrice = fluctuatePrice(props.price);
    setBestPrice(newFluctuatedPrice);
  }, [props.turn, props.price]);

  // 如果你需要保留chooseBestPrice函数
  function chooseBestPrice() {
    return bestPrice;
  }

  return (
    // 你的组件内容
    <button onClick={/* 触发回合切换的逻辑 */}>Turn</button>
  );
}

方案2：用useRef记录上一次回合值 #

如果不想维护状态，可通过useRef保存上一次的回合数，每次调用函数时判断回合是否变化：

import { useRef } from 'react';

function YourGameComponent(props) {
  // 用ref保存上一次的回合值，组件重新渲染时不会重置
  const prevTurnRef = useRef(props.turn);

  function chooseBestPrice() {
    let currBestPrice = props.price;
    // 只有当当前回合和上一次不同时，才触发价格波动
    if (props.turn !== prevTurnRef.current) {
      currBestPrice = fluctuatePrice(props.price);
      prevTurnRef.current = props.turn; // 更新记录的回合值
    }
    return currBestPrice;
  }

  return (
    <button onClick={/* 触发回合切换的逻辑 */}>Turn</button>
  );
}

关键注意点 #

• 确保点击Turn按钮时，props.turn确实在发生变化（比如从n递增到n+1），否则上述监听逻辑不会触发。
• 如果fluctuatePrice是纯函数（相同输入返回相同输出），可以用useMemo缓存结果，减少不必要的计算：

import { useMemo } from 'react';

const bestPrice = useMemo(() => {
  return fluctuatePrice(props.price);
}, [props.turn, props.price]);

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