I am getting Null value on my props on initial render-CodePudding

My problem is I am having this output when I run/refresh my system

{user: Array(0)}

I use props to send my user info on my other components

Here is my App.js code

function App() {
  const [user, setUser] = useState([])
  const token = localStorage.getItem('mytoken')

  let navigate = useNavigate()
  
  useEffect(() => {
        ...
        .then(result => setUser(result))
      },[token])

    return (
    <div>
      <Header user = {user}/>
      <Routes>
        <Route>
        <Route path='/homepage' element = {<UserHomePage user = {user}/>} ></Route>
        </Route>
      </Routes>
      
      
      
    </div>
  );

And here is my other UserHomePage.js

function UserHomePage(props) {
  console.log(props)
return (
    <div>
      

    </div>
  );
}

CodePudding user response：

You are setting the state to an array, but you are sending an object to the component.

setUser(result)

should be

setUser(result.user)

CodePudding user response：

Put "const token = localStorage.getItem('mytoken')" inside of the useEffect and remove the [token]

Because the token variable is not a state, it is a static variable, useEffect trigger point runs on state change, your token variable is not a state. Quick fix to this is empty the square brackets