[英]“Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.” error
I am trying to pass a user
object as the value of my React Context.Provider
as in <UserContext.Provider value={user} />
.我正在尝试将
user
对象作为我的 React Context.Provider
的值传递给<UserContext.Provider value={user} />
。 However, React does not like the idea of passing objects as children.然而,React 不喜欢将对象作为子对象传递的想法。 Here is the error message I get:
这是我收到的错误消息:
Error: Objects are not valid as a React child (found: object with keys {id, username, first_name, last_name, email, avatar}).
错误:对象作为 React 子对象无效(找到:带有键 {id, username, first_name, last_name, email, avatar} 的对象)。 If you meant to render a collection of children, use an array instead.
如果您打算渲染一组子项,请改用数组。
I hope somebody can help.我希望有人可以提供帮助。 Here is my React component where all this happens:
这是我的 React 组件,所有这些都发生在这里:
class MyApp extends App {
constructor(props) {
super(props);
this.state = {
user: {},
authenticating: false,
};
}
logout = () => {
...
};
render() {
const { Component, pageProps } = this.props;
const user = {
user: this.state.user,
logout: this.logout,
};
return (
<>
{!this.state.authenticating && (
<UserContext.Provider value={user}>
<Navbar />
<Component {...pageProps} />
</UserContext.Provider>
)}
</>
);
}
}
Interestingly, when I change有趣的是,当我改变
const user = {
user: this.state.user,
logout: this.logout,
};
to (for example)到(例如)
const user = {
username: this.state.user.username,
logout: this.logout,
};
everything works very well.一切都很好。
So (as the error message above sort of implies) the problem lies in passing this.state.user
to my context provider.因此(正如上面的错误消息所暗示的那样)问题在于将
this.state.user
传递给我的上下文提供程序。 Why?为什么? How can I solve this?
我该如何解决这个问题?
Additionally, here is my <Context.Consumer />
:此外,这是我的
<Context.Consumer />
:
<UserContext.Consumer>
{user => (
<>
{user.user ? (
<>
<Avatar user={user.user} />
<Button onClick={user.logout}>Logout</Button>
</>
) : (
<>
<Nav.Link href="/users/login">Log in</Nav.Link>
<Nav.Link href="/users/signup">Sign up</Nav.Link>
</>
)}
</>
)}
</UserContext.Consumer>
replace代替
function Avatar({ user }) {
return <Nav.Link href="/users/login">{user}</Nav.Link>;
}
with和
function Avatar({ user }) {
return <Nav.Link href="/users/login">{user.something}</Nav.Link>;
}
CodeSandbox: https://codesandbox.io/s/trusting-rubin-7rcc8 CodeSandbox: https ://codesandbox.io/s/trusting-rubin-7rcc8
It's most likely that you're trying to render the context like thus, which results in the error, rather than deconstructing the context/user object.很可能您试图像这样渲染上下文,这会导致错误,而不是解构上下文/用户对象。
// this results in
// Objects are not valid as a React child (found: object with
// keys {username, age}). If you meant to render a collection of
// children, use an array instead.
<Consumer>
{(ctx) => (
<>
{ctx.user}
</>
)
</Consumer>
App.js应用程序.js
import React from "react";
import UserState, { Consumer } from "./UserState";
const Avatar = ({ user }) => (
<>
<div>{user.username}</div>
<div>{user.age}</div>
</>
);
const UserData = () => {
return (
<Consumer>
{(ctx) => (
<>
{ctx.user && (
<>
<Avatar user={ctx.user} />
</>
)}
</>
)}
</Consumer>
);
};
export default function App() {
const userState = {
user: {
username: "hi",
age: 18
}
};
return (
<UserState.Provider value={userState}>
<UserData />
</UserState.Provider>
);
}
UserState.js用户状态.js
import React from "react";
const UserState = React.createContext({});
export default UserState;
export const { Consumer } = UserState;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.