reactjs - 如何根据同一周期的状态有条件地运行 useEffect

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 Hook ，每次 postAction 更改时都会运行。我希望仅当 getToken 运行并检索 token 时才发生“最终事件”。 我相信 setToken setter 的异步性质没有及时发生设置 token 以满足 if 语句的条件>。因此，最终事件永远不会在第一次运行时执行。

Answer 1

您可以添加另一个 useEffect Hook ，专门查找 token 的更改。

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

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