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

Question

Я новичок, чтобы отреагировать, было бы здорово, если бы кто-то смог объяснить проблему, на этот вопрос ответили, но я все еще в замешательстве.

import React from 'react' ; 
import Card from './Card.js';
const CardList = ({Friends}) =>{
    const Cardcomponent = Friends.map((user , i) => {
        return(
            <div>
                 <Card id={Friends[i].id} name={Friends[i].name} username={Friends[i].username} instagram={Friends[i].instagram}  />
            </div>
              )
    })
return(
          <div>
                {Cardcomponent}
          </div>
      )
} 
export default CardList ;

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

Answer 1

Вы не думаете о правильной реакции.

Данные о друзьях поступают из какого-то внешнего источника. Вы собираетесь использовать его в своих компонентах.

Здесь у вас есть 2 основных компонента.

• Карта: отображение данных об одном пользователе
• CardList: отображает компоненты карты

Каждый из ваших компонентов нуждается в разных данных для правильной работы. Когда вы передаете массив друзей в CardList, вы просто хотите, чтобы он отображал один компонент Card для каждого элемента друга в списке.

React берет на себя все манипуляции с DOM за кулисами, поэтому он должен быть уверен, что каждый элемент на экране может быть уникально идентифицирован. Вот почему нам иногда нужно помочь, сообщив, какой ключ использовать для компонента, когда мы знаем, что их может быть много.

Компоненту Card нужна информация только об одном друге, и это все, что мы получаем от CardList.

Обратите внимание, что Card не определена внутри CardList и что CardList не определен в приложении. Это позволяет нам повторно использовать эти компоненты в других местах, если мы хотим.

Об этом можно сказать гораздо больше, но, надеюсь, это немного поможет.

Вот пример приложения:

import React from "react";
import ReactDOM from "react-dom";

const Card = ({ friend, id, name, username, instagram }) => (
  <div>
    <ul>
      <li>id: {id}</li>
      <li>name: {name}</li>
      <li>username: {username}</li>
      <li>instagram: {instagram}</li>
    </ul>
  </div>
);

const CardList = ({ friends }) => (
  <div>
    {friends.map(friend => <Card key={friend.id} {...friend} />)}
  </div>
);

function App() {
  const friends = [
    { id: 1, name: "John Smith", username: "jsmith", instagram: "N/A" },
    { id: 2, name: "Mary Jane", username: "mjane", instagram: "puppyLover" },
    {
      id: 3,
      name: "Harry Potter",
      username: "hpotter",
      instagram: "best_wizard"
    }
  ];
  return (
    <div className="App">
      <CardList friends={friends} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

Проблема была решена, возвращаясь к реквизитам, которые использовались функцией в другом файле, когда я добавил {} к свойствам в моем файле Card.js (некоторый другой файл)

   const Card = ( id , email , name ) => { return( ...
                                             ....);
      to 
   const Card = ( {id , email , name} ) => { return( ...
                                                     ...);

Этот ответ помог мне найти решение https://stackoverflow.com/a/33577681/11556916

Answer 3

Cardcomponent - список компонентов. Таким образом, чтобы отобразить их, как говорится в сообщении об ошибке, вы должны зациклить их, используя map

{Cardcomponent.map((component, index) => {
  return (
    <div key={index}>
      {component}
    </div>
  )
}