ReactJS-对象作为React子对象无效

Question

我想将代码片段添加到受帐户保护的页面中，以确保如果在没有有效令牌的情况下访问，用户会重定向到登录页面。

因此，我创建了一个VerifySignInStatus函数，如果身份验证成功，它将接收要显示的组件作为参数，执行验证，如果验证失败，则显示登录页面(即AuthPage组件(，或者如果成功，则显示所需组件(作为函数的参数传递(。

当验证失败时，代码正确地呈现AuthPage，但是，当验证通过时，<h1>组件不会显示，而是在控制台中抛出一个错误，称为Uncaught Error: Objects are not valid as a React child (found: object with keys {displayComponent}). If you meant to render a collection of children, use an array instead.。

VerifySignInStatus函数

export function VerifySignInStatus(displayComponent) {
const { token, removeToken, setToken } = UseToken(); // setToken, token, removeToken
const [hasFetched, setHasFetched] = useState(false);
const [isTokenValid, setIsTokenValid] = useState(false);
const tokenExists = token && token !== "" && token !== undefined;
if (tokenExists) {
ValidateToken(token, setHasFetched, setIsTokenValid);
}
if (tokenExists && !hasFetched) {
return <div>Loading</div>;
}
if (!tokenExists || !isTokenValid) {
return <AuthPage setToken={setToken} />;
}
return displayComponent;
}

Dashboard.js(我正试图使用有效令牌访问(

import { VerifySignInStatus } from "./authentication/authFunctions";
function Dashboard() {
return <VerifySignInStatus displayComponent={<h1>Dashboard</h1>} />;
}
export default Dashboard;

Answer 1

您正在将完整的props对象作为变量displayComponent传递。

你想从道具中提取它，比如：

VerifySignInStatus({displayComponent}) {
....
}