解决React父组件状态更新不一致问题：深入理解不可变性

const handleDescension = (soul) => {
    let descensionData = soulsDescending; // 获取状态对象的引用

    if (descensionData.queue.length >= descensionData.maxQueueLength) {
        console.log("No room in the Descension queue.");
        return;
    }

    descensionData.queue = [...descensionData.queue, soul]; // 直接修改了 descensionData 对象的 queue 属性
    setSoulsDescending(descensionData); // 将修改后的同一个对象引用传递给 setState
};

const handleAscension = (soul) => {
    let ascensionData = soulsAscending; // 获取状态对象的引用

    if (ascensionData.queue.length >= ascensionData.maxQueueLength) {
        console.log("No room in the Ascension queue.");
        return;
    }

    ascensionData.queue = [...ascensionData.queue, soul]; // 直接修改了 ascensionData 对象的 queue 属性
    setSoulsAscending(ascensionData); // 将修改后的同一个对象引用传递给 setState
};

const handleDescension = (soul) => {
    // 使用函数式更新确保获取到最新的状态
    setSoulsDescending(prevData => {
        // 检查队列长度，如果已满则直接返回当前状态，不进行更新
        if (prevData.queue.length >= prevData.maxQueueLength) {
            console.log("No room in the Descension queue. This soul is left to roam in purgatory");
            return prevData; // 返回旧的状态，避免不必要的更新
        }

        // 创建一个新的状态对象副本
        return {
            ...prevData, // 复制 prevData 的所有属性
            queue: [...prevData.queue, soul], // 创建一个新的 queue 数组，并添加新的 soul
        };
    });
};

const handleAscension = (soul) => {
    // 使用函数式更新确保获取到最新的状态
    setSoulsAscending(prevData => {
        // 检查队列长度，如果已满则直接返回当前状态，不进行更新
        if (prevData.queue.length >= prevData.maxQueueLength) {
            console.log("No room in the Ascension queue. This soul is left to roam in purgatory");
            return prevData; // 返回旧的状态，避免不必要的更新
        }

        // 创建一个新的状态对象副本
        return {
            ...prevData, // 复制 prevData 的所有属性
            queue: [...prevData.queue, soul], // 创建一个新的 queue 数组，并添加新的 soul
        };
    });
};

import React, { useState } from 'react';
import Purgatory from './Purgatory';
import Heaven from './Heaven';
import Hell from './Hell';
import Shop from './Shop'; // 假设存在

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

    const handleDescension = (soul) => {
        setSoulsDescending(prevData => {
            if (prevData.queue.length >= prevData.maxQueueLength) {
                console.log("No room in the Descension queue. This soul is left to roam in purgatory");
                return prevData;
            }
            return {
                ...prevData,
                queue: [...prevData.queue, soul],
            };
        });
    };

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

    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} />
        </>
    );
}

// Purgatory.js
export default function Purgatory({ handleAscension, handleDescension }) {
    // ... 其他逻辑 ...

    const handleDecision = (id, decision, soul) => {
        if (decision) {
            console.log("Final: Ascended");
            handleAscension(soul); // 调用父组件的上升处理函数
        } else {
            console.log("Final: Descended");
            handleDescension(soul); // 调用父组件的下降处理函数
        }
    };

    // ... 渲染逻辑 ...
}