javascript - React hooks:使用 useEffect 时未获取状态更新
问题描述
我在混合useState
和useEffect
钩子时遇到问题。我似乎无法query
在onReady()
.
function Foo() {
const [ query, setQuery ] = React.useState('initial query');
React.useEffect(() => {
myLibClient.onReady(onReady)
}, []);
function onReady() {
const newQuery = myLibClient.createQuery({ options });
setQuery(newQuery);
console.log(query); // initial query :(
}
return null;
}
谁能看到我做错了什么或解释为什么这不起作用?
解决方案
这里的问题是,就像this.setState
在基于类的反应组件中一样,该setQuery
函数也异步设置状态。
因此,如果您在设置状态后尝试访问该值,您将获得较旧的值。
您可以在此处验证此行为。https://codesandbox.io/s/2w4mp4x3ry。(参见名为 Counter.js 的文件)您会看到 counter 的值之前和之后是相同的。
如果要访问更新的值,可以在下一个渲染周期中访问它。我创建了另一个示例,您可以在其中看到正在呈现新的查询值。
https://codesandbox.io/s/8l7mqkx8wl(参见名为 Counter.js 的文件)
推荐阅读
- linux - 处理第二个和更多参数中的每一个
- google-data-studio - 具有 OAuth 和唯一参数的合作伙伴连接器
- angular-material - 无法掉落 Angular 材质掉落物品
- windows - 更改 ComboBox 中嵌入的编辑控件的背景色
- php - 将 type="text" & type="time" 中的值连接为 php、Mysql 中的 timstamp
- python-3.x - 2D 数据的自定义 Lambert 保形投影在另存为 pdf (16MB) 时会提供非常大的文件大小
- nvidia-jetson-nano - 例外:jetson.utils -- 未能创建 glDisplay 设备
- xml - 通过 XSLT 从 xml 中选择动态标签
- html - Ruby on Rails 购物车
- javascript - 在博客上使用 javascript 定义要标记的值