Блог

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

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

#javascript #reactjs

Вопрос:

Я пытаюсь создать пользовательский интерфейс на основе карт, который берет данные из data.js файл и заполняет информацию в карточках, которые я создал data.js файл со следующими данными.

 export default [
{
  name: 'Lion',
  scientificName: 'Panthero leo',
  size: 140,
  diet: ['meat'],
  
},
{
  name: 'Gorilla',
  scientificName: 'Gorilla beringei',
  size: 205,
  diet: ['plants', 'insects'],
  additional: {
    notes: 'This is the eastern gorilla. There is also a western gorilla that is a different species.'
  }
},
{
  name: 'Zebra',
  scientificName: 'Equus quagga',
  size: 322,
  diet: ['plants'],
  additional: {
    notes: 'There are three different species of zebra.',
    link: 'https://en.wikipedia.org/wiki/Zebra'
  }
}

]

Затем я создал EventCard.js файл выглядит следующим образом

 import React from 'react';
import './EventCard.css';

export default function EventCard(
    additional,
  diet,
  name,
  scientificName,
  size
) {
    
    return (
    <div><h2>{name}</h2>
    <h3>{scientificName}</h3>
      <h4>{size}kg</h4>
      {(<div>{diet}</div>)}
      </div>)
}

В App.js файл выглядит следующим образом

 function App() {

  return (
    <><Router>
      <Navbar />
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/about' component={About} />
        <Route path='/services' component={Services} />
        <Route path='/contact-us' component={Contact} />
        <Route path='/signin' component={Login} />
        <Route path='/search/*' component={SearchResults} />
      </Switch>
    </Router><div className="wrapper">
        <h1>Events</h1>
        {data.map((event) => (
          <EventCard 
          additional={event.additional}
          diet={event.diet}
          key={event.name} 
          name={event.name}
          scientificName={event.scientificName}
          size={event.size}/>

        ))}
      </div></>
  );
}

export default App;

Пожалуйста, позвольте указать, где я иду не так
Спасибо!

Ответ №1:

это должно быть

 export default function EventCard({
    additional,
  diet,
  name,
  scientificName,
  size
})

и диета-это массив, когда его не должно быть, постройте этот массив или сопоставьте его со строкой

Комментарии:

1. Спасибо! Это решило проблему

2. @Andy вам, вероятно, следует объяснить, почему это решение работает.

Ответ №2:

Данные, переданные в компонент в качестве свойств компонента, всегда будут в объекте в виде пар ключи/значения, поэтому вам необходимо решить, как их восстановить.

Таким образом, реквизиты не являются отдельными аргументами для компонента, который вы в настоящее время обрабатываете, они каким-то образом должны быть доступны из этого объекта. Вы можете получить к ним прямой доступ ( props.name ), или вы разрушаете данные из объекта, как показано в примере ниже.

(Примечание: я также использовал список для выделения элементов массива диет здесь.)

 const data=[{name:"Lion",scientificName:"Panthero leo",size:140,diet:["meat"]},{name:"Gorilla",scientificName:"Gorilla beringei",size:205,diet:["plants","insects"],additional:{notes:"This is the eastern gorilla. There is also a western gorilla that is a different species."}},{name:"Zebra",scientificName:"Equus quagga",size:322,diet:["plants"],additional:{notes:"There are three different species of zebra.",link:"https://en.wikipedia.org/wiki/Zebra"}}];

function EventCard(props) {
  
  const {
    name,
    scientificName,
    size,
    diet
  } = props;

  return (
    <div>
      <h2>{name}</h2>
      <h3>{scientificName}</h3>
      <h4>{size}kg</h4>
      <ul>
        {diet.map(item => <li>{item}</li>)}
      </ul>
    </div>
  );

}

function Example({ data }) {
  return (
    <div>
      {data.map(props => {
        return <EventCard {...props} />
      })}
    </div>
  );
};

ReactDOM.render(
  <Example data={data} />,
  document.getElementById("react")
); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>
Метки: , ,