使用useState后，控制台日志状态不返回当前值 [英] console log the state after using useState doesn't return the current value

问题描述

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

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

  import React，{useState} from"react";从"react-dom"导入ReactDOM；函数Weather(){const [天气，setWeather] = useState();返回 (<输入值= {天气}onChange = {(e)=>{setWeather(e.target.value);console.log(天气);}}/>);}const rootElement = document.getElementById("root");ReactDOM.render(< Weather/> ;, rootElement); 

默认情况下，

解决方案

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

在您的示例中，在页面的全新加载中，键入's'导致useState更改状态，但由于它是异步的，因此将使用旧的状态值调用 console.log ，即 undefined (因为您未设置值.如果需要，则应考虑设置初始状态)

  const [天气，setWeather] = useState('');//设置初始状态 

真正读取状态值的唯一方法是使用 useEffect ，当重新渲染组件时会调用该方法.您的方法就变成了:

 从'react'导入React，{useEffect，useState};从'react-dom'导入ReactDOM；函数Weather(){const [天气，setWeather] = useState('');useEffect(()=> console.log(天气)，[天气]);const changeValue = event =>setWeather(event.target.value);返回<输入值= {天气} onChange = {changeValue}/> ;;}const rootElement = document.getElementById('root');ReactDOM.render(< Weather/> ;, rootElement); 

using console.log() after using reactjs useState() hook, doesn't return the current value of this state, How can I handle this?

Here's code for the case, try to figure out what's the console log display.

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 by default simply does one thing and one thing only, set the new state and cause a re-render of the function. It is asynchronous in nature so by default, methods running after it usually run.

From your example, on a fresh load of the page, typing 's' causes useState to change the state, but because it is asynchronous, console.log will be called with the old state value, i.e. undefined (since you didn't set a value. You should consider setting an initial state, if you want to)

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

The only way to truly read the value of the state is to use useEffect, which is called when there is a re-render of the component. Your method simply becomes:

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后，控制台日志状态不返回当前值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！