如何克服异步useState钩？

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

Answer 2

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