React父容器状态值更新异常问题求助

• 开发场景：正在开发一款闲置游戏，用setInterval定期执行流程，对象在三个同级组件（Purgatory、Heaven、Hell，均位于父容器Content下）间传递，对象在Purgatory生成，根据灵魂（soul）的善恶属性传至Heaven或Hell。
• 当前问题：子组件Purgatory传递的对象无法稳定添加到父容器的状态数组中，页面显示的队列长度有时更新有时不更新。
• 组件结构：
  • Content（父容器）
    • Heaven
    • Purgatory（向父组件传值的子组件）
    • Hell

相关代码 #

Purgatory组件回调逻辑 #

export default function Purgatory(params) {
    const { handleAscension, handleDescension } = params;

    // ...其他逻辑

    const handleDecision = (id, decision, soul) => {
        if (decision) {
            console.log("最终：升入天堂");
            handleAscension(soul);
        } else {
            console.log("最终：堕入地狱");
            handleDescension(soul);
        }
    };
}

Content组件状态定义 #

const [soulsAscending, setSoulsAscending] = useState({
    maxQueueLength: 10,
    queue: [],
});
const [soulsDescending, setSoulsDescending] = useState({
    maxQueueLength: 10,
    queue: [],
});

Content组件处理方法（原问题代码） #

const handleDescension = (soul) => {
    let descensionData = soulsDescending;

    if (descensionData.queue.length >= descensionData.maxQueueLength) {
        console.log(
            "天堂队列已满，该灵魂滞留炼狱"
        );
        return;
    }

    descensionData.queue = [...descensionData.queue, soul];
    setSoulsDescending(descensionData);
};

const handleAscension = (soul) => {
    let ascensionData = soulsAscending;

    if (ascensionData.queue.length >= ascensionData.maxQueueLength) {
        console.log(
            "天堂队列已满，该灵魂滞留炼狱"
        );
        return;
    }

    ascensionData.queue = [...ascensionData.queue, soul];
    setSoulsAscending(ascensionData);
};

return (
    <>
        <Shop />
        <Heaven soulsAscending={soulsAscending.queue} />
        <p>天堂队列长度：{soulsAscending.queue.length}</p>

        <Purgatory
            handleAscension={handleAscension}
            handleDescension={handleDescension}
        />

        <p>地狱队列长度：{soulsDescending.queue.length}</p>
        <Hell soulsDescending={soulsDescending.queue} />
    </>
);

核心问题 #

你在更新状态时直接修改了原状态对象的引用：

let ascensionData = soulsAscending; // 直接引用原状态对象
ascensionData.queue = [...ascensionData.queue, soul]; // 修改原对象属性
setSoulsAscending(ascensionData); // 传递同一个引用，React无法识别状态变化

React依赖新的对象引用来判断状态是否更新，直接修改原状态对象属于可变操作，会导致React无法感知状态变化，进而出现渲染不稳定的情况。

修复后的处理方法 #

使用函数式更新（确保获取最新的状态快照），同时创建全新的状态对象：

const handleDescension = (soul) => {
  setSoulsDescending(prevState => {
    if (prevState.queue.length >= prevState.maxQueueLength) {
      console.log("地狱队列已满，该灵魂滞留炼狱");
      return prevState; // 状态不变，直接返回原状态
    }
    // 解构原状态，替换queue属性，生成新对象
    return {
      ...prevState,
      queue: [...prevState.queue, soul]
    };
  });
};

const handleAscension = (soul) => {
  setSoulsAscending(prevState => {
    if (prevState.queue.length >= prevState.maxQueueLength) {
      console.log("天堂队列已满，该灵魂滞留炼狱");
      return prevState;
    }
    return {
      ...prevState,
      queue: [...prevState.queue, soul]
    };
  });
};

额外建议 #

1. 由于使用了setInterval，务必在组件卸载时清除定时器，避免内存泄漏：

import { useEffect } from 'react';

// 在Content组件中添加
useEffect(() => {
  const intervalId = setInterval(() => {
    // 你的定时执行逻辑
  }, 1000);
  return () => clearInterval(intervalId); // 组件卸载时清除定时器
}, []);

2. 可考虑合并两个状态为一个，简化状态管理（可选）：

const [soulQueues, setSoulQueues] = useState({
  heaven: { maxQueueLength: 10, queue: [] },
  hell: { maxQueueLength: 10, queue: [] }
});

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