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

问题描述 投票:0回答:2
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组件中解决此问题?

javascript reactjs components state
2个回答
0
投票

React状态更新是异步的,即排队等待next渲染,因此日志正在显示当前渲染周期的状态值。您可以使用效果在更新时记录该值。这样,您可以在相同的渲染周期中记录与要渲染的相同的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>
  );
}

0
投票

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

let handleChange = input => {
   setState(prevValue => {
     return { value: input };
   });
   console.log(state.value);
 };
  • 在状态上使用useEffect

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

© www.soinside.com 2019 - 2024. All rights reserved.