React钩子陈旧状态
React钩子陈旧状态
提问于 2019-06-27 07:22:26
我试图在回调中异步调用setState，问题是当我的函数调用setState时，状态已被发生的另一个事件更新。有没有办法从嵌套的回调中查询当前状态？
这是一个简单的演示，展示了我遇到的情况：
https://stackblitz.com/edit/react-uybyyn
import React, { Component, useState } from 'react';
import { render } from 'react-dom';
function App() {
const [state, setState] = useState({value: 0});
const click = async () => {
setTimeout(() => setState({value: state.value + 10}), 300);
async function apiCall(state) {
// fake it for now
return new Promise((res) => {
setTimeout(() => {
// !the latest state here!
res({value: state.value + 1});
}, 1000)
});
}
const newState = await apiCall(state);
setState(newState);
}
return (
<div>
Value: {state.value}
<button onClick={click}>Update</button>
</div>
);
}
render(<App />, document.getElementById('root'));回答 1
Stack Overflow用户
发布于 2019-06-27 07:38:19
useState有一个函数更新器表单。您可以使用它在更新之前获取最新的状态值。
const [val ,setVal] = React.useState(initVal);
const obj = { str: 'Hello' };
// Merge state form —
seVal(obj);
// Function updater form —
seVal(prevState => {
// Object.assign would also work
return {...prevState, ...{ str: prevState.str + ' World' }};
});所以你的例子会变成
setTimeout(() => setState(prevState => ({value: prevState.value + 10})), 300);参考文档- hooks-reference.html#functional-updates
codesandbox：我还更新了你的codesandbox，让它可以处理评论。codesandbox
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56782079
复制相关文章
相似问题