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

Я создаю приложение React с бэкэндом Rails. Я получаю сообщение об ошибке "Объекты недействительны в качестве дочернего элемента React (найдены: объект с ключами {id, name, info, created_at, updated_at}). Если вы хотите отобразить коллекцию детей, используйте вместо этого массив".

Вот как выглядят мои данные:

[
    {
        "id": 1,
        "name": "Home Page",
        "info": "This little bit of info is being loaded from a Rails 
        API.",
        "created_at": "2018-09-18T16:39:22.184Z",
        "updated_at": "2018-09-18T16:39:22.184Z"
    }
]

Мой код выглядит следующим образом:

import React from 'react';

class Home extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      homes: []
    };
  }

  componentDidMount() {
    fetch('http://localhost:3000/api/homes')
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            homes: result
          });
        },
        // error handler
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {

    const { error, isLoaded, homes } = this.state;

    if (error) {
      return (
        <div className="col">
          Error: {error.message}
        </div>
      );
    } else if (!isLoaded) {
      return (
        <div className="col">
          Loading...
        </div>
      );
    } else {
      return (
        <div className="col">
          <h1>Mi Casa</h1>
          <p>This is my house y'all!</p>
          <p>Stuff: {homes}</p>
        </div>
      );
    }
  }
}

export default Home;

Что я делаю неправильно?

Ответ 1

Ваши данные homes являются массивом, поэтому вам придется перебирать массив, используя Array.prototype.map(), чтобы он работал.

return (
    <div className="col">
      <h1>Mi Casa</h1>
      <p>This is my house y&apos;all!</p>
      {homes.map(home => <div>{home.name}</div>)}
    </div>
  );

Ответ 2

Сегодня я получил ту же ошибку, но с другим сценарием по сравнению со сценарием, представленным в этом вопросе. Надеюсь, что решение нижеприведенного сценария поможет кому-то.

Функция рендеринга ниже достаточна для понимания моего сценария и решения:

render() {
    let orderDetails = null;
    if(this.props.loading){
        orderDetails = <Spinner />;
    }
    if(this.props.orders.length == 0){
        orderDetails = null;
    }
    orderDetails = (
        <div>
            {
                this.props.orders.map(order => (
                <Order 
                    key={order.id}
                    ingredient={order.ingredients}
                    price={order.price} />
                ))
            }
        </div>
    );
    return orderDetails;
}

В приведенном выше фрагменте кода: если return orderDetails отправляется как return {orderDetails}, появляется сообщение об ошибке в этом вопросе, несмотря на значение 'orderDetails' (значение как <Spinner/> или null или JSX, связанное с <Order /> ] компонент).

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

Мы не можем вернуть объект JavaScript из вызова return внутри метода render(). Причина в том, что React ожидает, что компонент, JSX или null будут отображаться в пользовательском интерфейсе, а не какой-либо объект JavaScript, который я пытаюсь отобразить при использовании return {orderDetails}, и, следовательно, получаю ошибку, как указано выше.