Javascript React js:onClick之后我的状态没有改变

当我再次单击时，我的状态：changeSybmol没有变为true，但仍然为false

总之，如果状态为真，我只希望状态更新为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;

import React，{useState}来自“React”；
导入“/Box.css”；
功能盒（道具）{
const[symbol，setSymbol]=使用状态（“”）；
常量[changeSymbol，setChangeSymbol]=useState（false）；
函数handleClick（）{
如果（符号==“”）{
如果（！changeSymbol）{
setChangeSymbol（真）；
设置符号（“X”）；
console.log（changeSymbol）；
}否则{
设置符号（“O”）；
setChangeSymbol（假）；
}
}
}
返回(
{symbol}
);
}
导出默认框；

删除第一条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;

import React，{useState}来自“React”；
功能盒（道具）{
const[symbol，setSymbol]=使用状态（“”）；
常量[changeSymbol，setChangeSymbol]=useState（false）；
函数handleClick（）{
如果（！changeSymbol）{
setChangeSymbol（真）；
设置符号（“X”）；
console.log（changeSymbol）；
}否则{
设置符号（“O”）；
setChangeSymbol（假）；
}
}
返回(
{symbol}
);
}
导出默认框；

为什么要使用以下代码

if（symbol==“”）{

这不允许您的代码在设置符号后进一步执行。

---

删除此项&您的代码将正常运行。

您认为它不会因为日志而更改吗？我不这么认为，但我不会sure@AliQumailDennis Vash的意思是，您是否认为状态永远不会改变，因为记录的值不能反映它？还可以尝试将其记录在手柄外。将

console.log（“第一个if-working”）

放在第一个if语句之前&

console.log（“第二个if-working”）

放在第二个if语句之前。然后你就可以了解出了什么问题。