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

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

回答:

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

以上是 使用useState后,控制台日志状态不返回当前值 的全部内容, 来源链接: utcz.com/qa/429811.html

回到顶部