Регистрация состояния в функции после обновления, все еще выводит начальное состояние

Question

Я столкнулся с чем-то необычным при попытке настроить состояние из функции в React.

Простой пример включает в себя попытку изменить состояние testState, содержащее строку. Я думаю, что я могу использовать setTestState() из функции, чтобы изменить строку и увидеть ее измененное значение. Тем не менее, я заметил, что console.log(testState) выводит то же состояние, и поэтому кажется, что setTestState(...) ничего не делает. Но визуализированное состояние использует обновленную строку.

Так почему же console.log(tempState) отображает исходное состояние, а не новое? Я не смог найти ответы на это. Код, который я использовал ниже. Любые предложения будут великолепны.

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

function App() {  
  const [testState, setTestState] = useState("previous state");

  useEffect(() => {
    setGrid();
  }, []);

  const setGrid = () => {
    console.log(testState);         // output: "previous state"
    setTestState("changed state");
    console.log(testState);         // output: "previous state", expected "changed state"
  }

  return (
    <div>      
      {testState}
    </div>
  );
}

export default App;

Answer 1

setTestState () является асинхронным методом. Аналогично методу setState (). Таким образом, ваш второй console.log (testState) запускается до полного выполнения setTestState (), поэтому ваш console.log (testState) печатает старое состояние.

Если вы хотите убедиться, что ваш setTestState ( ) метод работает или нет, вы можете использовать useEffect () для него, который работает аналогично componentDidUpdate.

useEffect( () => {
    console.log("updated state", testState)
}, [ 'testState' ]);

Answer 2

Основная проблема - setTestState() обрабатывает изменения асинхронно. Вот почему у вас есть старое состояние во втором console.log(), потому что оно работает синхронно.

Для захвата изменений состояния вы можете использовать useEffect() hook.

Я предлагаю использовать в качестве следующее:

const [testState, setTestState] = useState('previous state');

useEffect(() => {
   setGrid();
}, []);

const setGrid = () => {
   console.log('oldState', testState);

   setTestState('changed state');
};

useEffect(() => {
   console.log('newState', testState);

   // ... actions after state change
}, [testState]);

Рекомендовано читать: Использование крюка эффектов

Надеюсь, это поможет!