React状态管理：如何正确从嵌套对象数组中移除元素

import React, { useState } from 'react';
import { Button, ButtonGroup } from '@mui/material'; // 假设使用了MUI组件

function DiveTracker() {
    const [dives, setDives] = useState([
        { boat: 'Marcelo', divesite: 'Blue Hole', guides: ['Lee', 'Jhon'] },
        { boat: 'Nemo', divesite: 'Coral Garden', guides: ['Alice', 'Bob'] },
    ]);

    // 错误的删除向导函数
    function deleteGuide(i, guide) {
        // 错误：直接引用了原始状态数组。tempArray和dives指向同一个数组。
        var tempArray = dives;

        // 错误：直接修改了tempArray内部的guides数组。
        // 这实际上是在修改原始dives数组内部的对象。
        tempArray[dives.indexOf(i)].guides = dives[dives.indexOf(i)].guides.filter(
            (e) => e !== guide,
        );

        // 错误：setDives接收到的仍然是原始数组的引用。
        // React检测到引用未变，不触发重新渲染。
        setDives(tempArray);
    }

    return (
        <div>
            <h2>潜水向导列表</h2>
            {dives.map((diveItem, index) => ( // 将i重命名为diveItem以提高可读性
                <div key={index} style={{ marginBottom: '10px' }}>
                    <h3>船只: {diveItem.boat} - 潜点: {diveItem.divesite}</h3>
                    {diveItem.guides.map((guideName, guideIndex) => (
                        <ButtonGroup key={`${index}-${guideIndex}`} style={{ marginRight: '5px' }}>
                            <Button variant="outlined">{guideName}</Button>
                            {/* 调用错误的删除函数 */}
                            <Button 
                                variant="contained" 
                                color="error" 
                                onClick={() => deleteGuide(diveItem, guideName)}
                            >
                                移除
                            </Button>
                        </ButtonGroup>
                    ))}
                </div>
            ))}
        </div>
    );
}

export default DiveTracker;

console.log(tempArray === dives); // 这将始终返回 true，表明引用未变
setDives(tempArray); // 因此 React 不会触发重新渲染

import React, { useState } from 'react';
import { Button, ButtonGroup } from '@mui/material';

function DiveTrackerCorrect() {
    const [dives, setDives] = useState([
        { boat: 'Marcelo', divesite: 'Blue Hole', guides: ['Lee', 'Jhon'] },
        { boat: 'Nemo', divesite: 'Coral Garden', guides: ['Alice', 'Bob'] },
    ]);

    // 正确的删除向导函数
    function deleteGuide(targetDive, guideToRemove) {
        // 1. 使用map方法创建一个全新的dives数组副本
        const updatedDives = dives.map((dive) => {
            // 2. 如果当前dive对象是我们要修改的目标
            if (dive === targetDive) { // 比较引用，或者使用唯一ID进行比较
                // 3. 创建一个新的guides数组，移除目标guide
                const newGuides = dive.guides.filter((g) => g !== guideToRemove);
                // 4. 返回一个全新的dive对象，包含更新后的guides数组
                // 使用展开运算符(...)来复制现有属性，并覆盖guides属性
                return { ...dive, guides: newGuides };
            }
            // 5. 对于其他未修改的dive对象，直接返回其本身（引用保持不变）
            return dive;
        });

        // 6. 使用setDives更新状态，传入一个全新的数组引用
        setDives(updatedDives);
    }

    return (
        <div>
            <h2>潜水向导列表 (正确更新)</h2>
            {dives.map((diveItem, index) => (
                // 列表渲染时，key属性至关重要，它帮助React识别哪些项已更改、添加或删除。
                // 实际应用中请使用稳定且唯一的ID作为key，此处使用index仅为示例。
                <div key={index} style={{ marginBottom: '10px' }}> 
                    <h3>船只: {diveItem.boat} - 潜点: {diveItem.divesite}</h3>
                    {diveItem.guides.map((guideName, guideIndex) => (
                        <ButtonGroup key={`${index}-${guideIndex}`} style={{ marginRight: '5px' }}>
                            <Button variant="outlined">{guideName}</Button>
                            <Button 
                                variant="contained" 
                                color="error" 
                                onClick={() => deleteGuide(diveItem, guideName)}
                            >
                                移除
                            </Button>
                        </ButtonGroup>
                    ))}
                </div>
            ))}
        </div>
    );
}

export default DiveTrackerCorrect;