为什么刷新页面时出现错误?反应

Question

登录用户页面后，我尝试刷新页面-它会引发错误吗？

这是我的仪表板，在我的应用程序中已经在运行，它运行得很好，但当我尝试刷新它时，它已经在用户页面上了，我得到了错误

这是我的代码https://codesandbox.io/s/serene-https-oi6hw

错误是：

错误：对象作为React子对象无效(已找到：具有键｛｝的对象(。如果要渲染子对象的集合，请使用数组

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;

Answer 1

以下是的问题

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

用户是一个对象。请尝试Hello，｛user？.email｝或您想要显示的属性

Answer 2

试试这个：

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;