如何克服异步使用状态钩子?

Question

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])

Answer 1

您需要在与令牌设置不同的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]);