Область действия переменной состояния, определенной с помощью useState в двойной вложенной функции в реакции ⇐ Javascript

[Anonymous]

Я пытался научиться реагировать, используя этот урок https://react.dev/learn/tutorial-tic-tac-toe. Код, которым я делюсь ниже, просто строит 9 квадратов, создает две переменные состояния: поворот и значение. Единственное, чего я пытаюсь достичь, это onClick, установить значение «X», если поворот === 1, и «O», если поворот == 2. Если блок A сохраняется (а блок B закомментирован) в handleClick, значение всегда равно нулю, а не отображаются «X» или «O». При включенном блоке B значение изменяется, как и ожидалось. (Перейдите по адресу https://codesandbox.io/p/sandbox/878wt9 ... c%2FApp.js и вставьте этот код в App.js, чтобы проверить самостоятельно). Что на самом деле происходит? Немного теории (с точки зрения области видимости или переменных/замыканий и т. д.) было бы полезно. (Я заметил следующее: если я использую setTurn для изменения значения Turn, я не получаю желаемого поведения. Если вместо этого я просто использую присвоение переменных, я получаю нужное поведение.
import { useState } from "react";

export default function Board() {
let [turn, setTurn] = useState(1);
// let turn = 1;

const Square = () => {
const [value, setValue] = useState(null);

const handleClick = () => {
// // Set A: If this block is NOT commented out and set B is
// // commented out, the `value` doesnt change from initialisation
// // and is Always null.
// if (turn === 1) {
// setValue("X");

// // turn = 2; // This code works.
// setTurn(2); // A.)This one does not
// } else {
// setValue("O");

// // turn = 1; // This does work.
// setTurn(1); // (A.)This does not work
// }

// Set B: If this block is NOT commented out and set A IS
// commented out, the `value` changes as per the logic.
if (turn === 1) {
setValue("X");

turn = 2; // This code works.
} else {
setValue("O");

turn = 1; // This does work.
}
};

console.log(`value ${value}`);

return (

{value}

);
};

return (















);
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... function-i