Я пытаюсь передать объект user в качестве значения моего React Context.Provider, как в <UserContext.Provider value={user} />. Однако React не любит идею передачи объектов как дочерних. Вот сообщение об ошибке, которое я получаю:
Ошибка: объекты недопустимы как дочерние объекты React (найдено: объект с ключами {id, username, first_name, last_name, email, avatar}). Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив.
Надеюсь, кто-нибудь сможет помочь. Вот мой компонент 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,
logout: this.logout,
};
к (например)
const user = {
username: this.state.user.username,
logout: this.logout,
};
все работает очень хорошо.
Итак (как следует из приведенного выше сообщения об ошибке) проблема заключается в передаче 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>
