如何在Remix中实现子组件自删除并避免状态丢失

问题出在两个地方：

• 闭包捕获了旧状态：removeChild函数是在子组件创建时生成的，它抓的是当时的childComponents数组，删除时只会基于这个旧数组修改，后面新增的子组件自然就丢失了。
• 状态存组件实例+用索引当标识：直接把<Child>组件存在状态里，还拿数组索引当key和删除标记，删中间元素后，后面元素的索引会往前挪，React渲染时会把后面的组件当成被删除的，导致它们消失。

解决办法分这几步 #

1. 状态存数据，不是组件：状态里只存子项的唯一标识（比如自增ID），渲染时再根据这些数据生成组件，避免闭包和索引混乱的问题。
2. 用函数式更新状态：调用setState时传函数，基于最新的状态数组修改，确保每次操作都用最新的数据。
3. 别用索引当key：给每个子项分配唯一ID当key，索引变了也不影响组件的识别。

修改后的代码：

import { useState } from "react";

export default function ParentComponent() {
    const [childIds, setChildIds] = useState([]);
    let nextId = 0; // 自增生成唯一ID

    // 用函数式更新，基于最新状态过滤
    const removeChild = (id) => {
        setChildIds(prevIds => prevIds.filter(itemId => itemId !== id));
    };

    const addChild = () => {
        setChildIds(prevIds => [...prevIds, nextId++]);
    };

    return (
        <div>
            <button onClick={addChild}>Add Child</button>
            <div>
                {childIds.map(id => (
                    <Child key={id} id={id} remove={removeChild} />
                ))}
            </div>
        </div>
    );
}

function Child({ id, remove }) {
    return (
        <div>
            <button onClick={() => remove(id)}>Delete Me</button>
        </div>
    );
}

改动说明 #

• 状态存ID数组：childIds只存每个子项的唯一ID，不再存组件实例，状态更简洁，也避免了闭包捕获旧组件数组的问题。
• 函数式更新：setChildIds接收的函数参数prevIds是最新的状态数组，每次删除或添加都基于最新数据操作，不会再出现丢失后续组件的情况。
• 唯一ID当标识：用自增ID作为key和删除时的标记，即使中间组件被删除，后面组件的ID不会变，React能正确识别每个组件，不会误删或渲染错误。

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