javascript - 如何克服异步 useState 钩子?
问题描述
的异步性质useState
是阻止状态及时到达我的功能。
const [pushToken, setPushToken] = useState('')
const storeToken = async () => {
const token = await registerForToken()
if (token) {
try {
await AsyncStorage.setItem(NOTIFICATION_TOKEN, token)
setPushToken(token)
} catch (err) {
throw new Error(err)
}
} else {
// do something else
}
}
useEffect(() => {
if (borrowerPending) {
storeToken()
}
try {
someMutation({
variables: {
someParameter: pushToken // this pushToken is still empty
}
})
} catch (err) {
throw new Error(err)
}
}, [borrowerPending])
setPushToken(token)
唯一在第二pushToken
次渲染时渲染。如何设置以使其在第一次运行时显示?
我尝试使用AsyncStorage.getItem(NOTIFICATION_TOKEN)
而不是setPushToken
钩子,但结果仍然相同
更新
const [pushToken, setPushToken] = useState('')
const storeToken = async () => {
const token = await registerForPushNotificationsAsync()
if (token) {
try {
await AsyncStorage.setItem(NOTIFICATION_TOKEN, token)
setPushToken(token)
} catch (err) {
throw new Error(err)
}
} else {
// do something else
}
}
useEffect(() => {
if (borrowerPending) {
storeToken().then(() => {
console.log("pushToken", pushToken)
try {
borrowerPendingToggle({
variables: {
borrowerPendingNotificationToken: pushToken
}
})
} catch (err) {
throw new Error(err)
}
})
}
}, [borrowerPending])
解决方案
useEffect
您需要在与令牌设置不同的地方处理突变的发送:
const [pushToken, setPushToken] = useState("");
const storeToken = async () => {
const token = await registerForToken();
if (token) {
try {
await AsyncStorage.setItem(NOTIFICATION_TOKEN, token);
setPushToken(token);
} catch (err) {
throw new Error(err);
}
} else {
// do something else
}
};
// Store the token
useEffect(() => {
if (borrowerPending) {
storeToken();
}
}, [borrowerPending, storeToken]); // You should reference all dependencies in the array, not just borrowerPending.
// This runs when the value of pushToken changes, so will run once the token has been stored.
useEffect(() => {
if (pushToken) {
try {
someMutation({
variables: {
someParameter: pushToken
}
});
} catch (err) {
throw new Error(err);
}
}
}, [pushToken, someMutation]);
推荐阅读
- flutter - 框架 Flutter 和 JUCE 之间的桥梁
- angularjs - AngularJS 1.8x 你如何在一个组件中 $cancelRequest?
- javascript - 地图功能在我的带有 Javascript 的 Json 文件中不起作用
- kotlin - 如何过滤格式化为日期的字符串部分?
- python - Python - 标识字符串开头和结尾的字符
- wpf - WPF 中的 CollectionViewSource 不显示来自 DataTable 的数据
- css - styled-component 模板文字返回 undefined 以响应组件
- c# - 升级 Visual Studio 16.9.0 后 Xamarin 表单不起作用
- purescript - 从 Purescript 中的元组中提取可能
- php - 错误日志未添加到 /tmp 的专用文件中