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

小编典典

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

reactjs

通过console.log()使用reactjs后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);

阅读 887

2020-07-22

共1个答案

小编典典

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

从您的示例中，在页面的全新加载中，键入’s’导致useState更改状态，但是由于它是异步的，因此console.log将使用旧的状态值来调用，即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);

2020-07-22