javascript - 如何在 React 中访问功能组件中的最新状态值
问题描述
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 状态更新是异步的,即排队等待下一次渲染,因此日志显示当前渲染周期的状态值。您可以使用效果在更新时记录值。这样,您可以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>
);
}
推荐阅读
- javascript - Blazor WebAssembly 应用程序 - 在导航时警告用户 - 在离开网页之前警告用户未保存的更改
- flutter - 将 DropdownButton 中的选定项目设置为从 firestore 文档中检索到的项目
- python-3.x - 创建具有精确 x 轴值的 matplot
- google-cloud-platform - CreateAssessment() 上的 Google.Cloud.RecaptchaEnterprise 错误-“请求包含无效参数”
- c# - 未调用自定义 AuthorizationHandler
- python - 如何在 Mac 上解决这个 Selenium 异常,上面写着“无法访问 chrome”?
- typescript - React Native 中的状态不更新
- python - Flask SQLAlchemy 按字段值和外键关系过滤记录
- asp.net - asp.net core 3.1 sendgrid不发送电子邮件
- ios - 如何将 UIImageView 向后旋转到屏幕中?