为什么我的状态不更新到另一个状态?

Question

Wy状态在另一个状态下没有更新，我不知道如何解决这个问题

我想用Socket做一个多人纸牌游戏。但是我遇到了这个问题。当selectColor状态改变时，它不会在其他状态中更新。每当我点击组件时，我都试图打印状态，但状态与初始状态相同。有人知道怎么解吗?

感谢

const [cards, setCards] = useState([]);
const [id, setId] = useState();
const [color, setColor] = useState("?");
const [selectColor, setSelectColor] = useState(false);
useEffect(() => {
socket.on("id", (id) => setId(id));
socket.on("forceDisconnect", () => setId("Full"));
socket.on("cards", (data) => {
setKarten([
data.map((element) => {
return (
<div
onClick={() =>
console.log(selectColor)
}
key={element}
>
<Card card={element} />
</div>
);
}),
]);
});
socket.on("selectColor", () => {
setSelectColor(true);
console.log("selectColor");
});
}, []);

Answer 1

您已经创建了一个闭包，并在执行socket.on("cards", etc. )回调时将selectColor的值放在其中(因此'冻结在时间中')。

在数据到达时创建react元素并将它们存储在状态中是不好的。你应该在渲染函数被调用时创建它们。像这样:

socket.on("cards", (data) => setCards(data));

return (
<>
{ cards.map(
card => (
<div onClick={() => console.log(selectColor)} key={card}>
<Card card={card} />
</div>
)
)}
</>
);