Question

My context

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>
    )
}

I tried creating a loading state and using that to ensure that

my Landing page

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

As you can see I ve tried using to check loading and user but neither ends up working. It ends up just displaying "loading..." forever. How can I make sure that my component doesn t load until its mounted to avoid errors?

Answer 1

This error is happening because you don t check condition for dispatch({type: LOADING }) exactly.

页: 1

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

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

    if(user){
      const decoded = jwtDecode(user)
      dispatch({type:  LOGIN , payload: decoded._id})
      return
    }
    dispatch({type:  LOADING })
  }, [])
}

Or else:

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

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

    if(user){
      const decoded = jwtDecode(user)
      dispatch({type:  LOGIN , payload: decoded._id})
    } else {
      dispatch({type:  LOADING })
    }
  }, [])
}

友情链接