在这种情况下如何使用 useEffect 来立即更新状态？或者任何替代方法

Question

我正在寻找一种方法来在代码中 console.log 需要时显示更新状态“filledBoxes”。但是更新后的状态会在一回合后出现。

我不知道在这种情况下如何使用 'useEffect'。在“showSymbol”函数中使用时会出错。请让我知道如何解决这种情况。

function Playfield() {

  const [ turn, setTurn ] = useState(0);
  const [ filledBoxes, setFilledBoxes ] = useState({
    player1: [],
    player2: []
  });

  function showSymbol (event) {
     // console.log(event);

   if(event.target.innerHTML === "") {

      if(turn%2 === 0) {
        event.target.innerHTML = "X";
        setFilledBoxes(prevValue =>  ({
              ...prevValue,
             player1: [...prevValue.player1, event.target.id]
           })
         );
      } else {
        event.target.innerHTML = "O";
        setFilledBoxes(prevValue =>  ({
              ...prevValue,
             player2: [...prevValue.player2, event.target.id]
           })
         );
      }

     console.log(filledBoxes.player1);
     console.log(filledBoxes.player2);

     setTurn(turn + 1);
   }
  }

Answer 1

useEffect 不会导致状态立即更新。
它只是一个内置的钩子，可以“监听”其依赖项的变化，
并执行您传递给它的回调，一旦这些依赖项中的任何一个发生更改。
在这种情况下，它用于在发生更改后执行某个 action/s。

这样做 -

useEffect(() => {
   console.log(state);
}, [state])

更新完成后会显示状态。
For more info.

在这种情况下如何使用 useEffect 来立即更新状态？或者任何替代方法

How can useEffect be used in this case to update state instantly? Or any alternative approach

javascript

reactjs

use-effect

use-state