控制台记录使用use State后的状态不返回当前值[重复]

Question

使用console.log（）后使用reactjsuse State（）钩子，不返回此状态的当前值，我该如何处理？

以下是该案例的代码，尝试找出控制台日志显示的内容。

import React, { useState } from "react";
import ReactDOM from "react-dom";

function Weather() {
  const [weather, setWeather] = useState();

  return (
    <input
      value={weather}
      onChange={(e) => {
        setWeather(e.target.value);
        console.log(weather);
      }}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Weather />, rootElement);

Answer 1

onChange={(e) => {
    setWeather(e.target.value);
    console.log(weather);
  }}

当这个函数被触发时，由于setWeather是异步的，它将被传递给web api。Javascript引擎不处理这个功能。wep api处理这个，当它完成时，作为web api一部分的事件循环将它传递给调用堆栈。

调用栈是函数被执行的地方。一旦异步函数被传递到web api，不管它的执行时间是多少(即使它有0秒的超时)，它们都不会被移动到调用栈，除非javascript引擎完成了同步代码的执行。一旦调用栈被释放，事件循环将把函数传递给调用栈来执行。

所以在你的代码中，onChange（） 被传递给调用堆栈。在此函数内部，必须执行 2 个函数。由于setWeather是异步的，它转到Web api，获取e.target.value，同时控制台.log被执行。当调用堆栈中没有剩余的同步代码时，事件循环会将 setWeather 推送到要执行的调用堆栈。

假设您在输入字段中输入“name”。在“nam”之后，状态是“nam”，但是当您键入“e”时，这将在webapi中执行，因此当它在web api中时，console.log将记录当前状态“nam”。这就是为什么你总是在一个字符后看到控制台

Answer 2

当您调用< code>setWeather时，您触发了组件的重新呈现器，它将再次调用此函数。但是，< code>console.log(天气)；仍然引用< code>useState返回的第一个值，这是您的原始值。如果您想打印它，您应该:

console.log(e.target.value);

Answer 3

use State默认情况下只做一件事，设置新状态并导致函数的重新渲染。它本质上是异步的，因此默认情况下，在它之后运行的方法通常会运行。

在您的示例中，在页面的新加载中，键入“s”会导致useState更改状态，但是因为它是异步的，所以调用< code>console.log时会使用旧的状态值，即< code>undefined(因为您没有设置值。你应该考虑设置一个初始状态，如果你想)

const [weather, setWeather] = useState('');    // Set the intial state

真正读取状态值的唯一方法是使用 useEffect，当组件重新呈现时调用它。您的方法只需变成：

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

function Weather() {
    const [weather, setWeather] = useState('');

    useEffect(() => console.log(weather), [weather]);

    const changeValue = event => setWeather(event.target.value);

    return <input value={weather} onChange={changeValue} />;
}

const rootElement = document.getElementById('root');
ReactDOM.render(<Weather />, rootElement);