如何解决“对象作为React子代无效如果要渲染子代的集合,请改用数组”错误
我正试图像user
一样传递Context.Provider
对象作为我的React <UserContext.Provider value={user} />
的值。但是,React不喜欢将对象作为子对象传递的想法。这是我收到的错误消息:
错误:对象作为React子对象无效(找到:带有键的对象 {id,用户名,名字,姓氏,电子邮件,头像})。如果你想 呈现儿童的集合,请改用数组。
我希望有人能提供帮助。这是我所有的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>
)}
</>
);
}
}
有趣的是,当我改变
const user = {
user: this.state.user,};
到(例如)
const user = {
username: this.state.user.username,};
一切正常。
因此(正如上面的错误消息所暗示的那样),问题出在将this.state.user
传递给我的上下文提供程序。为什么?我该如何解决?
另外,这是我的<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>
解决方法
替换
function Avatar({ user }) {
return <Nav.Link href="/users/login">{user}</Nav.Link>;
}
使用
function Avatar({ user }) {
return <Nav.Link href="/users/login">{user.something}</Nav.Link>;
}
,
CodeSandbox: https://codesandbox.io/s/trusting-rubin-7rcc8
您很有可能试图像这样渲染上下文,这会导致错误,而不是解构上下文/用户对象。
// 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
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
import React from "react";
const UserState = React.createContext({});
export default UserState;
export const { Consumer } = UserState;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。