我的背景

export const UserContextProvider = ({children}) => {

    const [state, dispatch] = useReducer(authorizeUser, {loading: true})

    useEffect(() => {
        const user = localStorage.getItem('user')

        if(user){
            const decoded = jwtDecode(user)
            dispatch({type: 'LOGIN', payload: decoded._id})
        }

        dispatch({type: 'LOADING'})
        

    }, [])

    if(state.loading){
        return (
          <div>
            <h1>Loading...</h1>
          </div>
        )
      }

    return(
        <userContext.Provider value={{...state, dispatch}}>
            {children}
        </userContext.Provider>
    )
}

字符串
我尝试创建一个加载状态，并使用它来确保
登录页面

return (
    !user ? <div><h1>loading...</h1></div> :
    <div>
      <div>
        <div>
          <h1>Welcome {user.name}</h1>
          <UserLogout></UserLogout>
        </div>
        <form onSubmit={handleSubmit}>
          <input
          type='file'
          name='photo'
          onChange={handlePhoto}
          >
          </input>
          <input type='submit'></input>
        </form>
      </div>
      <UserImageGallery image = {image} />
    </div> 
  ) 
}

export default LandingExample

型
正如你所看到的，我已经尝试使用检查加载和用户，但都没有工作。它最终只是永远显示“加载中...”。如何确保我的组件在挂载之前不会加载以避免错误？