如何在 React 中访问功能组件中的最新状态值答案

【问题标题】：How to access the latest state value in the functional component in React如何在 React 中访问功能组件中的最新状态值
【发布时间】：2020-09-09 01:43:39
【问题描述】：

import React, { useState } from "react";
import Child from "./Child";
import "./styles.css";

export default function App() {
  let [state, setState] = useState({
    value: ""
  });

  let handleChange = input => {
    setState(prevValue => {
      return { value: input };
    });
    console.log(state.value);
  };
  return (
    <div className="App">
      <h1>{state.value}</h1>

      <Child handleChange={handleChange} value={state.value} />
    </div>
  );
}
import React from "react";

function Child(props) {
  return (
    <input
      type="text"
      placeholder="type..."
      onChange={e => {
        let newValue = e.target.value;
        props.handleChange(newValue);
      }}
      value={props.value}
    />
  );
}

export default Child;

在这里，我将数据从输入字段传递到父组件。但是，在带有 h1 标签的页面上显示它时，我能够看到最新状态。但是在使用 console.log() 时，输出是以前的状态。如何在功能性 React 组件中解决这个问题？

【问题讨论】：

console.log() 将始终为您提供 previousState ，因为状态更改是异步过程。您可以使用 useEffect() react hook 来检查当前状态。
非功能性 React 使用 componentDidUpdate;使用功能性 React，您必须将 useEffect 钩子与包含状态变量的依赖项数组一起使用。但是，您到底想达到什么目的？您正在console.log() 命令之前编写最新值，因此您可以在当时和那里完全访问它。这里的目标是什么？
检查这个供您参考：stackoverflow.com/questions/31702861/…
@ChrisG 我只是想在两个地方、控制台日志中以及使用 h1 在页面上显示时都具有相同的输出
但是为什么？ console.log() 对用户没有任何功能。无论如何，只需使用newState = { value: input };，然后使用newState 更新状态并记录它。

标签： javascript reactjs components state

【解决方案1】：

React 状态更新是异步的，即排队等待 下一个 渲染，因此日志显示当前渲染周期的状态值。您可以使用效果在更新时记录值。这样，您可以在相同的渲染周期中记录相同的state.value。

export default function App() {
  const [state, setState] = useState({
    value: ""
  });

  useEffect(() => {
    console.log(state.value);
  }, [state.value]);

  let handleChange = input => {
    setState(prevValue => {
      return { value: input };
    });
  };

  return (
    <div className="App">
      <h1>{state.value}</h1>

      <Child handleChange={handleChange} value={state.value} />
    </div>
  );
}

【讨论】：

【解决方案2】：

为您提供两种解决方案： - 在handleChange函数中使用输入值

let handleChange = input => {
   setState(prevValue => {
     return { value: input };
   });
   console.log(state.value);
 };

在状态上使用 useEffect

使用效果(()=>{ 控制台日志（状态。值） },[状态])

【讨论】：