Question

我有一系列事件必须依赖于先前事件的执行来发生。

const [token, setToken] = useState('')
const getToken = async () => {
    try {
        const newToken = await AsyncStorage.getItem(LOGIN_TOKEN)
        setToken(newToken)
    } catch (err) {
        throw new Error(err)
    }
}

useEffect(() => {
    getToken()
    if(token) {
        console.log("the final event")
    }
}, [postAction])

我有useEffect钩子，每次postAction更改时都会运行。我希望仅在getToken运行并检索token时发生“最终事件”。我相信setToken设置器的异步性质不会及时发生，因此无法设置token来满足if statement的条件。因此，最终事件永远不会在第一次运行时执行。

Answer 1

您可以添加另一个useEffect钩子，该钩子专门用于查找令牌的更改。

useEffect(() => {
  getToken();
}, [postAction]);

useEffect(() => {
  if(token) {
    console.log("the final event")
  }
}, [token]);

Answer 2

const [token, setToken] = useState('');

useEffect(() => {
    async getToken(){
      try {
        const newToken = await AsyncStorage.getItem(LOGIN_TOKEN);
        setToken(newToken);
          } catch (err) {
          throw new Error(err)
          }
    }
getToken();
}, [token])

如何有条件地运行useEffect，具体取决于同一周期的状态

2 个答案: