过滤器与地图reactjs和jsx

Question

我正在研究一个React项目，以学习React。

在组件的render方法中，当我用于.map遍历值并返回组件数组时，一切都会按预期进行。

<ol className="books-grid">
        {              
          books && books.map((book, index) => {
            if (book.shelf === shelf) {
              return (
                <Book key={book && book.id ? book.id : index} changeShelf={this.props.changeShelf} book={book} />
              );
            }
          })}
      </ol>

但是当我使用时filter：

<ol className="books-grid">
            {              
              books && books.filter((book, index) => {
                if (book.shelf === shelf) {
                  return (
                    <Book key={book && book.id ? book.id : index} changeShelf={this.props.changeShelf} book={book} />
                  );
                }
              })}
          </ol>

我得到了错误（我已经研究过）

Uncaught (in promise) Error: Objects are not valid as a React child

我不明白为什么filter会抛出此错误vs map？有什么独特的反应可以.map吗？两者都返回一个数组。

Answer 1

Array.filter不允许您将数据转换为组件。那是工作Array.map。

您应该先过滤，然后再链接地图调用：

{              
  books && books
    .filter(book => book.shelf === shelf)
    .map((book, index) => {
      return (
        <Book
           key={book && book.id ? book.id : index}
           changeShelf={this.props.changeShelf}
           book={book} />
      );
    })
}

如果您希望避免在的列表上进行第二次传递books，那么您也可以返回null，尽管这样做“不太好”，因为您强迫React
null在根本不需要做任何工作的情况下进行渲染：

{              
  books && books
    .map((book, index) => {
      if (book.shelf !== shelf) {
        return null;
      }
      return (
        <Book
           key={book && book.id ? book.id : index}
           changeShelf={this.props.changeShelf}
           book={book} />
      );
    })
}