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

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 标签的页面上显示它时，我能够看到最新状态。但是在使用 console.log(( 时，输出是以前的状态。如何在函数式 React 组件中解决这个问题？

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

Answer 2

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

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

• 使用对状态的影响

  useEffect(((=>{ console.log(state.value( }，[状态](

Answer 3

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

我希望所有更新的项目在添加后立即处于我的状态 所以我使用这样的使用效果钩子。

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])