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

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

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

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5614948.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-15
下一篇 2022-12-15

发表评论

登录后才能评论

评论列表(0条)

保存