如何创建一个数组并对其进行映射以简化我的代码？

Question

我正在尝试根据我正在学习的课程的审阅者的一些反馈来改进我的代码。

所以，我有这部分代码：

function Home(props) {

  const [, setShowSearchPage] = useState(false);

  return (

    <div className="list-books">

      <div className="list-books-title">

        <h1>MyReads</h1>

      </div>

      <div className="list-books-content">

        <div>

          <div className="bookshelf">

            <h2 className="bookshelf-title">Currently Reading</h2>

            <div className="bookshelf-books">

              <ol className="books-grid">

                {props.books

                  .filter(book => book.shelf === 'currentlyReading')

                  .map(book => (

                    <li key={book.id}>

                      <Book

                        book={book}

                        changeShelf={props.changeShelf}

                        actualShelf="currentlyReading"

                      />

                    </li>

                  ))}

              </ol>

            </div>

          </div>

          <div className="bookshelf">

            <h2 className="bookshelf-title">Want to Read</h2>

            <div className="bookshelf-books">

              <ol className="books-grid">

                {props.books

                  .filter(book => book.shelf === 'wantToRead')

                  .map(book => (

                    <li key={book.id}>

                      <Book

                        book={book}

                        changeShelf={props.changeShelf}

                        actualShelf="wantToRead"

                      />

                    </li>

                  ))}

              </ol>

            </div>

          </div>

  );

}

我的问题是：

是否有一种时尚的形式让我创建一系列书架信息（书架是“当前阅读”、“想阅读”和“阅读”），例如我可以映射它并为每个书架生成代码块，为了避免重复相同的代码？

Answer 1

有很多方法可以重构你所拥有的，但这是我认为你正在寻找的：function Home({books, changeShelf}) {&nbsp; const [, setShowSearchPage] = useState(false)&nbsp; const shelves = {&nbsp; &nbsp; currentlyReading: 'Currently Reading',&nbsp; &nbsp; wantToRead: 'Want to Read',&nbsp; &nbsp; read: 'Read',&nbsp; }&nbsp; return (&nbsp; &nbsp; <div className="list-books">&nbsp; &nbsp; &nbsp; <div className="list-books-title">&nbsp; &nbsp; &nbsp; &nbsp; <h1>MyReads</h1>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div className="list-books-content">&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {Object.keys(shelves).map(shelf => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="bookshelf">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2 className="bookshelf-title">{shelves[shelf]}</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="bookshelf-books">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ol className="books-grid">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {books&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .filter(book => book.shelf === shelf)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .map(book => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li key={book.id}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Book&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; book={book}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; changeShelf={changeShelf}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; actualShelf={shelf}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ol>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; )}

Answer 2

您可以定义渲染函数以不多次重复相同的代码，并且更易于阅读import React, { useState } from 'react';import PropTypes from 'prop-types';const propTypes = {};const defaultProps = {};function Component(props) {&nbsp; const [, setShowSearchPage] = useState(false);&nbsp; const renderBook = (book) => (&nbsp; &nbsp; <li key={book.id}>&nbsp; &nbsp; &nbsp; <Book book={book} changeShelf={props.changeShelf}&nbsp; &nbsp; &nbsp;actualShelf="currentlyReading" />&nbsp; &nbsp; </li>&nbsp; );&nbsp; const renderBookShelf = (books, title) => (&nbsp; &nbsp; &nbsp; <div className="bookshelf">&nbsp; &nbsp; &nbsp; &nbsp; <h2 className="bookshelf-title">{title}</h2>&nbsp; &nbsp; &nbsp; &nbsp; <div className="bookshelf-books">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ol className="books-grid">{books.map(renderBook)}</ol>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; return (&nbsp; &nbsp; <div className="list-books">&nbsp; &nbsp; &nbsp; <div className="list-books-title">&nbsp; &nbsp; &nbsp; &nbsp; <h1>MyReads</h1>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div className="list-books-content">&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{renderBookShelf(props.books.filter((book) => book.shelf === 'currentlyReading'), 'Currently Reading')}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{renderBookShelf(props.books.filter((book) => book.shelf === 'wantToRead'), 'Want to Read')}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{renderBookShelf(props.books.filter((book) => book.shelf === 'read'), 'Read')}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );}Component.propTypes = propTypes;Component.defaultProps = defaultProps;export default Component;

Answer 3

去年我在研究 NodeJS 和 Express 时遇到了类似的问题。您可以使用HTML 表格而不是列表。要填充表格，请参阅此答案。