为什么 id 和 itemId 在该反应代码中从不匹配？

Question

这是我在项目中的实际问题的简单表示，似乎我在反应中遗漏了一些东西，或者问题可能与反应无关，这是我的代码https://codesandbox.io/s/lucid-northcutt-c3fw4?file=/src/App.js

单击时我需要在列表中显示该项目，但这永远不会发生，因为该条件永远不会成立，我不知道为什么？

{id === itemId && el}

Answer 1

当你点击元素时，你成功地将itemId的值设置为被点击元素的id：

const handleItemClick = id => {
    setItemId(id);
};

但是，在重新渲染组件时，您会动态生成所有新的 id 值：

id={v4()}

极不可能（回复：不可能）新生成的 UUID 与之前生成的 UUID 相同。

不要在每次渲染时生成新的 UUID id 值。要么使用静态值，要么只使用来自.map() 的递增值：

{arr.map((el, i) => {
    return <Item
        id={i}
        itemId={itemId}
        item={el}
        handleItemClick={handleItemClick} 
     />;
 ))}

Answer 2

问题：

id={v4()} 这将在每个 render 上创建一个新的 uuid，因此当您单击 handleItemClick 时，它会更新 itemId 并导致 re-render 和所有 id 都因以下原因而更改id={v4()} 所以这永远不会成真{id === itemId && item}

{arr.map(el => {
    return <Item
        id={v4()} // <------ Issue is hear
        itemId={itemId}
        item={el}
        handleItemClick={handleItemClick} 
    />;
})}

解决方案：

// instead of creating uuid on render you can create and save it as state, so it won't change on each re-render
const [items, setItems] = useState([1, 2, 3, 4].map(() => v4()));

{items.map(id => {
    return (
    <Item
        id={id} // <----- Then use it like this
        itemId={itemId}
        item={id}
        handleItemClick={handleItemClick}
    />
    );
})}

工作演示：

Answer 3

首先，您在使用map() 时错过了关键道具。它只会发出警告，不用担心太多：P。

您的代码中的主要问题是，v4 将在每次渲染时生成随机键。所以 id 永远不会与 itemId 相同。尝试使用一些静态 ID。如果你喜欢map 附带index。你可以用那个

arr.map((el,index) => {
return <Item
           id={index}
           key={el}
           itemId={itemId}
           item={el}
           handleItemClick={handleItemClick} 
        />;
});

Answer 4

我假设 v4 会生成一个随机 ID。 所以id === itemId 永远不会是真的。

而且我没有看到 itemId 在任何地方被初始化。

如果你能告诉我这个条件是什么就太好了？

或者试试{id === itemId || item}

希望这会有所帮助 谢谢