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

Posted 2023-02-22

【中文标题】如何在 React 中访问功能组件中的最新状态值

【英文标题】：How to access the latest state value in the functional component in 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() 命令之前编写最新值，因此您可以在当时和那里完全访问它。这里的目标是什么？

检查这个供您参考：***.com/questions/31702861/…

@ChrisG 我只是想在两个地方、控制台日志中以及使用 h1 在页面上显示时都具有相同的输出

但是为什么？ console.log() 对用户没有任何功能。无论如何，只需使用newState = value: input ;，然后使用newState 更新状态并记录它。

【参考方案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

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