重新排序具有状态的组件时出现问题答案

【问题标题】：Problem when reordering components with state重新排序具有状态的组件时出现问题
【发布时间】：2020-11-13 03:42:23
【问题描述】：

我有一个带有输入文本字段的组件（在下面的代码中称为SingleItem）。为了存储和更新这个文本字段的值，我使用了useState 钩子。

现在，父组件可以有多个 SingleItem 实例，并且还可以重新排序。

问题是，在它们重新排序后，它们的状态似乎保持相同的顺序。我的理解是，这些钩子依赖于调用顺序，因此可以解释它。

我的问题是，实现这种情况的正确方法是什么。我认为ReorderComponents 可以保持所有SingleItems 的状态，但是传递 lambdas 进行更新可能会变得混乱。

function SingleItem(props: {item: string}) {
    const [value, setValue] = useState<string>(props.item);
    return <div>
        <TextField value={value} onChange={(e) => setValue(e.target.value)}/>
        <span>Input arg: {props.item}</span>
    </div>;
}

function ReorderComponents() {
    const [items, setItems] = React.useState(["a", "b", "c"]);
    return (
        <div className="App">
            {items.map(number => (
                <SingleItem item={number}/>
            ))}
            <Button variant={'contained'} onClick={() => setItems([...items.reverse()])}>Reverse</Button>
        </div>
    );
}

这是单击按钮后发生的情况。

【问题讨论】：

在地图中渲染 SingleItem 时，您应该会收到关于缺少 key 道具的控制台警告。它们key 应该是持久且唯一的，在这种情况下，您可以只使用该值本身<SingleItem item={number} key={number} />
做到了。谢谢@Jayce444。我认为这是更模糊的东西:)

标签： reactjs react-hooks

【解决方案1】：

Jayce444 在 cmets 中回答。我错过了SingleItem 中的key 属性

<SingleItem item={number} key={number} />

【讨论】：