我有发送动作的函数。我想在动作之前和之后显示一个加载器。我知道构成传递给setState. 问题是如何以异步方式更新属性：
handleChange(input) {
this.setState({ load: true })
this.props.actions.getItemsFromThirtParty(input)
this.setState({ load: false })
}
基本上，如果我将此属性作为应用程序状态的一部分（使用 Redux），一切都会很好，但我真的更喜欢将此属性仅带到组件状态。
您可以将 setState 包装在 Promise 中并使用 async/await 如下
setStateAsync(state) {
return new Promise((resolve) => {
this.setState(state, resolve)
});
}
async handleChange(input) {
await this.setStateAsync({ load: true });
this.props.actions.getItemsFromThirtParty(input);
await this.setStateAsync({ load: false })
}
将其余代码包装在第一个的回调中setState：
handleChange(input) {
this.setState({
load: true
}, () => {
this.props.actions.getItemsFromThirtParty(input)
this.setState({ load: false })
})
}
有了这个，你load保证被设置为truebeforegetItemsFromThirtParty被调用并且load被设置回false。
这假设您的getItemsFromThirtParty功能是同步的。如果不是，则将其转换为 promise，然后setState在链式then()方法中调用 final ：
handleChange(input) {
this.setState({
load: true
}, () => {
this.props.actions.getItemsFromThirtParty(input)
.then(() => {
this.setState({ load: false })
})
})
}
这是“async-await”setState 的typescript实现：
async function setStateAsync<P, S, K extends keyof S>(
component: Component<P, S>,
state:
((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) |
Pick<S, K> |
S |
null
) {
return new Promise(resolve => component.setState(state, resolve));
}
这是你可以做的...
onFetchComplete回调，以及input.将您的 handleChange 更改为 -
handleChange(input) {
this.setState({ load: true }, ()=>
this.props.actions.getItemsFromThirtParty(input,
()=>this.setState({ load: false }))
);
}
这将确保动作处理器代码可以调用您的状态更改回调，即使它不是以基于Promise的方式编写的。
以前的答案不适用于 Hooks。在这种情况下，将第二个参数传递给setState
警告：来自 useState() 和 useReducer() 钩子的状态更新不支持第二个回调参数。要在渲染后执行副作用，请在组件主体中使用 useEffect() 声明它。
正如错误消息所说，useEffect在这种情况下您需要使用代替（另请参阅此讨论以获取更多详细信息）