Javascript 控制台记录使用useState后的状态'；t返回当前值

使用reactjs

useState（）

hook后，使用

console.log（）

不会返回此状态的当前值，如何处理

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

import React，{useState}来自“React”；
从“react dom”导入react dom；
函数天气（）{
const[weather，setWeather]=useState（）；
返回(
{
设定天气（如目标值）；
控制台.日志（天气）；
}}
/>
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

调用

setWeather

时，会触发组件的重新加载程序，该程序将再次调用此函数。但是，

console.log（天气）仍然引用由
useState
返回的第一个值，即原始值。如果要打印，应执行以下操作：

console.log(e.target.value);

useState
默认情况下只执行一件事，只执行一件事，设置新状态并重新呈现函数。它本质上是异步的，因此默认情况下，在它之后运行的方法通常都会运行

从您的示例中，在页面的一个新的负载上，键入S会导致UsStand改变状态，但是因为它是异步的，所以<代码>控制台。log < /代码>将用旧的状态值调用，即<代码>未定义（因为您没有设置一个值。如果您想设置初始状态，如果您想）
真正读取状态值的唯一方法是使用
useffect
，当组件重新呈现时调用该方法。您的方法简单地变成：

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);

import React，{useffect，useState}来自“React”；
从“react dom”导入react dom；
函数天气（）{
const[weather，setWeather]=使用状态（“”）；
useffect（（）=>console.log（weather），[weather]）；
const changeValue=event=>setWeather（event.target.value）；
返回；
}
const rootElement=document.getElementById（'root'）；
render（，rootElement）；

启动此函数时，由于
setWeather
是异步的，因此它将被传递给web api。Javascript引擎不处理此函数。WEPAPI处理此问题，完成后，作为web api一部分的事件循环将此问题传递给调用堆栈

调用堆栈是执行函数的地方。一旦异步函数被传递到web api，不管它的执行时间如何（即使它有0秒的超时），除非javascript引擎完成同步代码的执行，否则它们将不会移动到调用堆栈。调用堆栈空闲后，事件循环将函数传递给要执行的调用堆栈

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

假设您在输入字段中输入“name”。在“nam”之后，状态是“nam”，但当您键入“e”时，这将在webapi中执行，因此当它在web api中时，console.log将记录当前状态，即“nam”。这就是为什么您总是在控制台后面看到一个字符
yes，因为组件尚未更新。您应该使用登录
useffect
您说过的“一件事和一件事，设置新状态并重新呈现函数”。这是两件事，而不是一件事。我有点困惑。
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);

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