Как исправить ошибку «Invariant Violation: Objects are not valid as a React child»?

Question

[DisaPadla]

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

Invariant Violation: Objects are not valid as a React child (found object with keys {name, author, descrip}). If you meant to render a collection of children, use an array instead or wrap the object using React.addons.createFragment(object).

Как её можно решить? Вот код:

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import getBook  from '../actions/books';
import Radium from 'radium';
import {Link} from 'react-router';

function mapStateToProps(state) {
  return {
    books: state.book,
    url: state.router.params.name,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    getBooks: () => dispatch(getBook()),
  };
}

@Radium
@connect(mapStateToProps, mapDispatchToProps)
export default class bookPage extends Component {
  static propTypes = {
    url: PropTypes.string.isRequired,
    books: PropTypes.array.isRequired,
  };

  render() {
    const {books, url} = this.props;
    return (
      <ul>
        {books.filter((book) => {
          switch (book.name) {
          case url:
            return (<li >
              <p>{book.name}</p>
              <p><Link to={`/${book.author}`}>{book.author}</Link></p>
              <p>{book.descrip}</p>
            </li>);
          default:
            return 0;
          }
        })}
      </ul>
    );
  }
}

Answer 1

[Никита Гущин]

Что вы пытаетесь сделать в методе рендер? Ошибка говорит о том, что вы вместо реакт-элемента рендерите объект(ы).

Вам нужно сначала отфильтровать книги, а потом отрендерить их как элементы списка:

render() {
    const {books, url} = this.props;
    return (
      <ul>
        {books.filter(book => book.name === url).map((book, key) => (
          <li key={key}>
              <p>{book.name}</p>
              <p><Link to={`/${book.author}`}>{book.author}</Link></p>
              <p>{book.descrip}</p>
            </li>
        ))}
      </ul>
    );
  }

Comments

[DisaPadla]

Огромное спасибо. Без Вас бы не разобрался. Очень тяжело дается реакт и редакс пока. Только 5 день изучаю. Тяжко идет

[Никита Гущин]

DisaPadla: Не за что. Попробуйте еще параллельно практиковаться\посмотреть материалы по функциональному программированию в JS