如何在等待在React原生中设置状态后打开模式？
我有一个屏幕，上面有一些选项。如果选择该选项，则会设置数据的状态。然后我就有了一个确认按钮。如果用户点击确认，我会进行一个异步调用来获取一些额外的数据。我想在打开模式之前等待它发生，因为我需要在我的模式中呈现额外的数据。
在钩子之前，我会使用setState并执行类似于：this.setState({data: myData}, () => this.openModal())的操作，因为这样可以可靠地设置状态，然后打开模式。网上的所有答案似乎都建议使用useEffect，但这样做似乎不太可靠：
useEffect(() => {
if (data) {
setModalOpen(true)
}
}, [data, setData])我不希望我的模式可能在不同的点上随机打开。此外，将代码放在我设置状态的相同位置似乎更好。在那里是有意义的。不是一些随机的useEffect
有什么建议可以实现这一点吗？
(我能想到的另一个解决方案是在每次选择时调用API select，而不是在确认之前)然而，这可能会导致许多不必要的API调用，所以我不想走那条路。
回答 1
Stack Overflow用户
发布于 2021-02-20 13:21:01
使用useEffect()是正确的，我在尝试使用钩子在setState上进行回调时也遇到了这个问题。
就像你说的：this.setState({data: myData}, () => this.openModal())以前是可能的，但现在当尝试使用钩子时，控制台显示错误：
警告:来自useState()和useReducer()挂钩的状态更新不支持第二个回调参数。要在呈现后执行副作用，请使用useEffect()在组件主体中声明它。
因此，useEffect()似乎是一条可行的道路。
如果您想对状态执行一些操作，如验证，则应在正确设置状态后使用useEffect()作为回调函数。
useEffect(() => {
// fetch on load
axios.get("https://randomuser.me/api/").then((response) => {
setPerson(response.data.results[0]);
});
}, []);
useEffect(() => {
// do some validation perhaps
if (person !== null) {
if (person.name.first && person.name.last) {
setModal(true);
} else {
setModal(false);
}
}
}, [person]); // add person in dependency list 正如评论中所建议的，您还可以在异步数据到达时执行setModal() (使用.then() or await)。
一些示例代码使用随机用户生成器API和axios来获取。
useEffect(() => {
// fetch on load
axios.get("https://randomuser.me/api/").then((response) => {
setPerson(response.data.results[0]);
setModal(true); // set modal visibility
});
}, []);https://stackoverflow.com/questions/66291326
复制
腾讯云开发者
