React js：我的 state 在 onClick 之后没有改变

Question

当我 onClick，我的 state:changeSybmol 没有改变为真，但仍然是假的。

总之，我只希望我的 state 更新为 false，如果它是真的，反之亦然。

import React, { useState } from "react";
import "./Box.css";

function Box(props) {
  const [symbol, setSymbol] = useState("");
  const [changeSymbol, setChangeSymbol] = useState(false);

  function handleClick() {
    if (symbol === "") {
      if (!changeSymbol) {
        setChangeSymbol(true);
        setSymbol("X");
        console.log(changeSymbol);
      } else {
        setSymbol("O");
        setChangeSymbol(false);
      }
    }
  }

  return (
    <div key={props.key} onClick={handleClick} className="box">
      {symbol}
    </div>
  );
}
export default Box;

Answer 1

删除第一个 if 语句，它就可以工作了。

import React, { useState } from "react";

function Box(props) {
  const [symbol, setSymbol] = useState("");
  const [changeSymbol, setChangeSymbol] = useState(false);

  function handleClick() {
      if (!changeSymbol) {
        setChangeSymbol(true);
        setSymbol("X");
        console.log(changeSymbol);
      } else {
        setSymbol("O");
        setChangeSymbol(false);
      }
    
  }

  return (
    <div key={props.key} onClick={handleClick} className="box">
      {symbol}
    </div>
  );
}
export default Box;

Answer 2

为什么要使用以下代码？

if (symbol === "") {}

一旦设置了符号，这将不允许您的代码进一步执行。 删除它，您的代码将运行良好。