Question

在使用reactjs console.log()钩子之后使用useState()，不会返回此状态的当前值，我该如何处理？

这里是案例代码，请尝试弄清控制台日志的显示内容。

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

useState默认情况下仅执行一项操作和一项操作，设置新状态并导致功能重新呈现。它本质上是异步的，因此默认情况下，通常在它之后运行的方法。

在您的示例中，在页面全新加载时，键入s会导致useState更改状态，但由于它是异步的，因此将使用旧状态值（即{{1 }}（因为没有设置值。如果需要，您应该考虑设置初始状态）

console.log

真正读取状态值的唯一方法是使用undefined，在重新渲染组件时会调用此方法。您的方法就变成：

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

Answer 2

调用setWeather时，将触发组件的重新渲染，这将再次调用此函数。但是，函数内的console.log(weather);仍引用useState返回的第一个值，即您的原始值。如果要打印，则应该执行以下操作：

console.log(e.target.value);

Answer 3

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，同时会执行console.log。当调用堆栈中没有同步代码时，事件循环会将setWeather推送到要执行的调用堆栈中。

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

使用useState后，控制台日志状态不返回当前值

3 个答案: