Why is there an error when refreshing the page? react-CodePudding

after i login in user page i try to refresh page -it throw an error ?

here is my dashboard, in my application is already running, it works fine, but already on the user page when i try to refresh it i got the error

here is my code https://codesandbox.io/s/serene-https-oi6hw

the error is :

Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

import { useSelector } from "react-redux";
//react-redux actions
import { Userinfo } from "../auth/actions/userActions";
import { logoutUser } from "../auth/actions/userActions";

//history
import { useHistory } from "react-router-dom";


const Dashboard = () => {
  const history = useHistory();
  const selectUser = (state) => state.user;
  const user = useSelector(selectUser);
  

  return (
  <div>
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          backgroundColor: "transparent",
          width: "100%",
          padding: "15px",
          display: "flex",
          justifyContent: "flex-start"
        }}
      >
        <Avatar image={Logo} />
      </div>
      <StyledFromArea bg={colors.dark2}>
        <StyledTitle size={65}>Hello, {user}</StyledTitle>
        <Userinfo />
        <ButtonGroup>
          <StyledButton to="#" onClick={() => logoutUser(history)}>
            Logout
          </StyledButton>
        </ButtonGroup>
      </StyledFromArea>
    </div>
  );
};
export default Dashboard;

CodePudding user response：

Try this:

import { useSelector } from "react-redux";
//react-redux actions
import { Userinfo } from "../auth/actions/userActions";
import { logoutUser } from "../auth/actions/userActions";

//history
import { useHistory } from "react-router-dom";


const Dashboard = () => {
  const history = useHistory();
  const selectUser = (state) => state.user;
  const user = useSelector(selectUser);
  

  return (
    <div>
      <Avatar image={Logo} />
      <StyledFromArea bg={colors.dark2}>
        <StyledTitle size={65}>Hello, {user}</StyledTitle>
        <Userinfo />
        <ButtonGroup>
          <StyledButton to="#" onClick={() => logoutUser(history)}>
            Logout
          </StyledButton>
        </ButtonGroup>
      </StyledFromArea>
    </div>
  );
};
export default Dashboard;

CodePudding user response：

The error seems to be caused in this line: <StyledTitle size={65}>Hello, {user}</StyledTitle>

I believe that the user is causing this problem. Can you show us what is the content of this variable? She probably is a object or an array.

CodePudding user response：

Here is the problem


<StyledTitle size={65}>Hello, {user}</StyledTitle>

user is an object. Try Hello, {user?.email} or the property you wanted to display