React中函数式组件中如何获取最新的state值

Question

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 标签的页面上显示它时，我能够看到最新的 state。但是在使用 console.log() 时，output 是之前的 state。我如何在功能性 React 组件中解决这个问题？

Answer 1

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

Answer 2

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

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

• 在 state 上使用 useEffect

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

Answer 3

Maybe it is helpful for others I found this way...

我希望在我的 state 中添加所有更新的项目，以便我使用这样的效果挂钩。

useEffect(() => {
    [temp_variable] = projects //projects get from useSelector
    let newFormValues = {...data}; //data from useState
    newFormValues.Projects = pro; //update my data object
    setData(newFormValues); //set data using useState
},[projects])