"Объекты недопустимы как дочерний элемент React. Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив." ошибка

#javascript #reactjs #javascript-objects #react-context

#javascript #reactjs #javascript-объекты #реагировать-контекст

Вопрос:

Я пытаюсь передать user объект в качестве значения моего React Context.Provider как в <UserContext.Provider value={user} /> . Однако React не нравится идея передачи объектов в качестве дочерних элементов. Вот сообщение об ошибке, которое я получаю:

Ошибка: объекты недопустимы в качестве дочернего элемента React (найдено: объект с ключами {id, имя пользователя, 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 amp;amp; (
          <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>

1. Если у вас есть новый вопрос, пожалуйста, задайте его как новый вопрос, а не полностью заменяйте старый вопрос. Похоже, что вы повторно использовали один и тот же post для ряда вопросов с тех пор, как вы установили награду…

2. Извините, но вы не можете просто перерабатывать сообщения с вопросами. Мы создаем надежное хранилище вопросов и ответов на них, чтобы будущие посетители могли извлечь из этого пользу. На ваш первоначальный вопрос было получено два ответа, и вместе они образуют единое целое, над чем вы сотрудничали вместе с ответчиками. Пожалуйста, не сводите на нет их усилия, удаляя исходный вопрос. Мы откатили сообщение до последнего правильного состояния и удалили награду.

Ответ №1:

заменить

 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>;
}

Ответ №2:

CodeSandbox:https://codesandbox.io/s/trusting-rubin-7rcc8

Скорее всего, вы пытаетесь отобразить контекст таким образом, что приводит к ошибке, а не к деконструкции объекта context / user.

 // 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 amp;amp; (
            <>
              <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;