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组件中解决此问题?
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>
);
}
为您提供两种解决方案:-在handleChange函数中使用输入值
let handleChange = input => {
setState(prevValue => {
return { value: input };
});
console.log(state.value);
};
在状态上使用useEffect
useEffect(()=> {console.log(state.value)},[state])