Question

Wy 状态未在其他状态更新，我不知道如何解决此问题。

我想用 Socket.io 做一个多人纸牌游戏，但我遇到了这个问题。每当 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

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

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

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


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

为什么我的状态没有在另一个状态更新？

1 个答案: