Reactjs 重新排序状态为的组件时出现问题

我有一个带有输入文本字段的组件（在下面的代码中称为

SingleItem

）。为了存储和更新此文本字段的值，我使用了

useState

hook

现在，父组件可以有多个

SingleItem

实例，还可以对它们重新排序

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

我的问题是，实现这个场景的正确方法是什么。我认为

reordcomponents

可以保存所有

SingleItems

的状态，但是传递lambda进行更新可能会变得混乱

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

functionsingleitem（props:{item:string}）{
const[value，setValue]=使用状态（道具项）；
返回
setValue（e.target.value）}/>
输入参数：{props.item}
;
}
函数ReorderComponents（）{
const[items，setItems]=React.useState（[“a”、“b”、“c”）；
返回(
{items.map（编号=>(
))}
setItems（[…items.reverse（）]）}>reverse
);
}

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

---

Jayce444在评论中回答。我在

SingleItem

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

---

Jayce444在评论中回答。我在

SingleItem

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

在地图中渲染单个项目时，您应该会收到控制台警告，提示您缺少一个

键。它们
键
应该是持久的和唯一的，在这种情况下，您可以只使用执行该操作的值本身。谢谢@Jayce444。我认为这是一个更模糊的东西：）你应该得到一个控制台警告，当渲染地图中的单个项目时，会丢失一个
键
道具。它们
键
应该是持久的和唯一的，在这种情况下，您可以只使用执行该操作的值本身。谢谢@Jayce444。我认为这是一个更模糊的问题：）