深入理解React状态更新机制：解决父组件值未按预期更新问题

const handleDescension = (soul) => {
    let descensionData = soulsDescending; // descensionData 只是 soulsDescending 的一个引用

    if (descensionData.queue.length >= descensionData.maxQueueLength) {
        console.log("No room in the Descension queue. This soul is left to roam in purgatory");
        return;
    }

    descensionData.queue = [...descensionData.queue, soul]; // 直接修改了原始对象引用的 queue 数组
    setSoulsDescending(descensionData); // 传入的 descensionData 仍然是原始对象的引用，React 认为对象没有变
};

import React, { useState, useCallback } from 'react';

// 假设这是你的 Content 组件
function Content() {
    const [soulsAscending, setSoulsAscending] = useState({
        maxQueueLength: 10,
        queue: [],
    });
    const [soulsDescending, setSoulsDescending] = useState({
        maxQueueLength: 10,
        queue: [],
    });

    // 使用 useCallback 优化回调函数，避免不必要的重新创建
    const handleDescension = useCallback((soul) => {
        // 使用函数式更新确保我们始终基于最新的状态进行更新
        setSoulsDescending(prevSoulsDescending => {
            // 检查队列是否已满，如果已满则直接返回前一个状态，不进行任何修改
            if (prevSoulsDescending.queue.length >= prevSoulsDescending.maxQueueLength) {
                console.log("No room in the Descension queue. This soul is left to roam in purgatory");
                return prevSoulsDescending; // 返回前一个状态，React 不会触发更新
            }

            // 创建一个新的 queue 数组，包含所有旧元素和新加入的 soul
            const updatedQueue = [...prevSoulsDescending.queue, soul];

            // 返回一个全新的状态对象，其中 queue 属性被新的 updatedQueue 替换
            // ...prevSoulsDescending 复制了 prevSoulsDescending 的所有其他属性（如 maxQueueLength）
            return {
                ...prevSoulsDescending,
                queue: updatedQueue,
            };
        });
    }, []); // 依赖项为空数组，表示此回调函数只在组件初次渲染时创建一次

    const handleAscension = useCallback((soul) => {
        setSoulsAscending(prevSoulsAscending => {
            if (prevSoulsAscending.queue.length >= prevSoulsAscending.maxQueueLength) {
                console.log("No room in the Ascension queue. This soul is left to roam in purgatory");
                return prevSoulsAscending;
            }

            const updatedQueue = [...prevSoulsAscending.queue, soul];

            return {
                ...prevSoulsAscending,
                queue: updatedQueue,
            };
        });
    }, []); // 依赖项为空数组

    // ... 你的 Shop, Heaven, Purgatory, Hell 组件定义
    // 假设这些组件已在其他地方定义或导入
    const Shop = () => <div>Shop Component</div>;
    const Heaven = ({ soulsAscending }) => <div>Heaven Queue Length: {soulsAscending.length}</div>;
    const Purgatory = ({ handleAscension, handleDescension }) => {
        // 模拟一个灵魂的决策过程
        const simulateDecision = () => {
            const newSoul = { id: Math.random(), good: Math.random() > 0.5 }; // 模拟一个灵魂
            if (newSoul.good) {
                console.log("Simulating: Ascended");
                handleAscension(newSoul);
            } else {
                console.log("Simulating: Descended");
                handleDescension(newSoul);
            }
        };

        return (
            <div>
                <h3>Purgatory</h3>
                <button onClick={simulateDecision}>Process Soul</button>
            </div>
        );
    };
    const Hell = ({ soulsDescending }) => <div>Hell Queue Length: {soulsDescending.length}</div>;


    return (
        <>
            <Shop />
            <Heaven soulsAscending={soulsAscending.queue} />
            <p>Heaven Queue: {soulsAscending.queue.length}</p>

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

            <p>Hell Queue: {soulsDescending.queue.length}</p>
            <Hell soulsDescending={soulsDescending.queue} />
        </>
    );
}

export default Content;