Javascript 如何在React中访问功能组件中的最新状态值 import React，{useState}来自“React”； 从“/Child”导入子项； 导入“/styles.css”； 导出默认函数App（）{ let[state，setState]=useState({ 值：“” }); 让handleChange=输入=>{ 设置状态（prevValue=>{ 返回{value:input}； }); console.log（state.value）； }; 返回( {state.value} ); } 从“React”导入React； 功能儿童（道具）{ 返回( { 设newValue=e.target.value； 道具.手变（新值）； }} value={props.value} /> ); } 导出默认子对象；

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

React状态更新是异步的，即排队等待下一次渲染，因此日志显示当前渲染周期的状态值。可以使用效果在值更新时记录该值。通过这种方式，您可以在相同的渲染周期中记录与渲染相同的

状态.value

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;

导出默认函数App（）{
常量[状态，设置状态]=使用状态({
值：“”
});
useffect（（）=>{
console.log（state.value）；
}，[state.value]）；
让handleChange=输入=>{
设置状态（prevValue=>{
返回{value:input}；
});
};
返回(
{state.value}
);
}

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

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

• 对状态使用useEffect
  useffect（（）=>{ console.log（state.value） }，[国家]）

---

console.log（）将始终为您提供以前的状态，因为状态更改是异步过程。您可以使用useffect（）react钩子检查当前状态。非功能性react使用

componentdiddupdate

；对于functional React，您必须将

useffect

挂钩与包含状态变量的依赖项数组一起使用。然而，你到底想要实现什么？您正在编写console.log（）命令之前的最新值，因此您可以随时访问它。这里的目标是什么？请检查以下内容以供参考：@ChrisG我只是想在控制台日志中的两个位置上都有相同的输出，同时在页面上显示H1，但为什么？console.log（）没有用于用户的函数。无论如何，只要使用

newState={value:input}

，然后使用

newState

更新状态并记录。

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