在React中显示页面之前发出http请求

Question

React中不再建议使用组件WillUnmount。我想向服务器发送一个请求，查看用户是否已登录，然后在实际显示页面之前更新状态。我不知道如何使用React钩子或React中推荐的方法来做到这一点。

Answer 1

如果您熟悉React类的生命周期方法，您可以of useEffect Hook作为componentDidMount、componentDidUpdate和组件WillUnmount组合。

以下演示了componentDidMount、componentDidUpdate和componentWillUnmount

useEffect(() => {
// function to run to check if user is log in

},[]) //<-- similar to componentDidMount , empty array, run once.

useEffect(() => {
}, [state]) //<-- similar to componentDidUpdate. Run when state changes.

useEffect(() => {
return () => cleanUp //<-- similar to componentWillUnMount, clean up functions.
}, [])

使用的推荐读数Effect Hook

使用挂钩设置状态的推荐读数

检查用户登录的示例

const Component = () => {
const [ loggedIn, setLoggedIn ] = useState(false) //set login initial state to false
useEffect(() => {
const checkLogin = async() => {
const checking = await fetch(api);
if (checking) {
setLoggedIn(true)  //set login state to true
}
}
checkLogin()

},[]) //<-- run once when component mounted

return (<div>{ loggedIn ? 'Logged In' : 'Not Logged In' }</div>)
}