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

问题描述

使用console.log() 使用reactjs useState() 钩子后，没有返回这个状态的当前值，我该如何处理?>

这是案例的代码，试着弄清楚控制台日志显示是什么.

import React, { useState } from "react";从react-dom"导入 ReactDOM；功能天气(){const [天气，设置天气] = useState();返回 (<输入值={天气}onChange={(e) =>{setWeather(e.target.value);控制台日志(天气)；}}/>);}const rootElement = document.getElementById("root");ReactDOM.render(<Weather/>, rootElement);

解决方案

useState 默认情况下只做一件事，只做一件事，设置新状态并重新渲染函数.它本质上是异步的，所以默认情况下，在它之后运行的方法通常会运行.

根据您的示例，在页面的新加载时，键入 's' 会导致 useState 更改状态，但由于它是异步的，将使用旧状态值调用 console.log, 即 undefined (因为你没有设置一个值.如果你想，你应该考虑设置一个初始状态)

const [weather, setWeather] = useState('');//设置初始状态

真正读取状态值的唯一方法是使用useEffect，它会在组件重新渲染时调用.你的方法简单地变成:

import React, { useEffect, useState } from 'react';从 'react-dom' 导入 ReactDOM；功能天气(){const [天气，setWeather] = useState('');useEffect(() => console.log(weather), [weather]);const changeValue = 事件 =>setWeather(event.target.value);return <input value={weather} 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屋！