Javascript 如何创建一个数组并映射到它以简化代码？

我正试图根据我正在学习的课程的评论者的一些反馈来改进我的代码

所以，我有这部分代码：

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>

          <div className="bookshelf">
            <h2 className="bookshelf-title">Read</h2>

            <div className="bookshelf-books">
              <ol className="books-grid">
                {props.books
                  .filter(book => book.shelf === 'read')
                  .map(book => (
                    <li key={book.id}>
                      <Book
                        book={book}
                        changeShelf={props.changeShelf}
                        actualShelf="read"
                      />
                    </li>
                  ))}
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

功能主页（道具）{
const[，setShowSearchPage]=使用状态（false）；
返回(
MyReads
正在阅读
{道具
.filter（book=>book.shelf===“currentlyReading”）
.map（book=>(


))}
想读书吗
{道具
.filter（book=>book.shelf===“wantToRead”）
.map（book=>(


))}
阅读
{道具
.filter（book=>book.shelf==='read'）
.map（book=>(


))}
);
}

我的问题是:

---

有没有一个时尚的表单可以让我创建一系列的工具架信息（工具架是“当前阅读”、“想要阅读”和“阅读”），这样我就可以在上面映射并为每个工具架生成一块代码，以避免重复相同的代码？

去年我在处理NodeJS和Express时遇到了类似的问题。 您可以使用而不是列表。

---

要填充表格，请参阅

我去年在处理NodeJS和Express时遇到了类似的问题。 您可以使用而不是列表。

---

有关填充表格的信息，请参见

您可以定义渲染函数，以避免多次重复同一代码，这样更易于阅读

import React, { useState } from 'react';
import PropTypes from 'prop-types';

const propTypes = {};
const defaultProps = {};

function Component(props) {
  const [, setShowSearchPage] = useState(false);

  const renderBook = (book) => (
    <li key={book.id}>
      <Book book={book} changeShelf={props.changeShelf}     actualShelf="currentlyReading" />
    </li>
  );
  const renderBookShelf = (books, title) => (
      <div className="bookshelf">
        <h2 className="bookshelf-title">{title}</h2>

        <div className="bookshelf-books">
          <ol className="books-grid">{books.map(renderBook)}</ol>
        </div>
      </div>
    );
  return (
    <div className="list-books">
      <div className="list-books-title">
        <h1>MyReads</h1>
      </div>

      <div className="list-books-content">
        <div>
           {renderBookShelf(props.books.filter((book) => book.shelf === 'currentlyReading'), 'Currently Reading')}
           {renderBookShelf(props.books.filter((book) => book.shelf === 'wantToRead'), 'Want to Read')}
           {renderBookShelf(props.books.filter((book) => book.shelf === 'read'), 'Read')}
        </div>
      </div>
    </div>
  );
}
Component.propTypes = propTypes;
Component.defaultProps = defaultProps;
export default Component;

import React，{useState}来自“React”；
从“道具类型”导入道具类型；
const propTypes={}；
const defaultProps={}；
功能组件（道具）{
const[，setShowSearchPage]=使用状态（false）；
const renderBook=（book）=>(


);
const renderBookShelf=（书籍、标题）=>(
{title}
{books.map（renderBook）}
);
返回(
MyReads
{renderBookShelf（props.books.filter（（book）=>book.shelf==='currentlyReading'），'currentlreading'）}
{renderBookShelf（props.books.filter（（book）=>book.shelf==='wantToRead'），'wantoread'）}
{renderBookShelf（props.books.filter（（book）=>book.shelf==='read'），'read'）}
);
}
Component.propTypes=propTypes；
Component.defaultProps=defaultProps；
导出默认组件；

您可以定义渲染函数，使同一代码不重复多次，这样更易于阅读

import React, { useState } from 'react';
import PropTypes from 'prop-types';

const propTypes = {};
const defaultProps = {};

function Component(props) {
  const [, setShowSearchPage] = useState(false);

  const renderBook = (book) => (
    <li key={book.id}>
      <Book book={book} changeShelf={props.changeShelf}     actualShelf="currentlyReading" />
    </li>
  );
  const renderBookShelf = (books, title) => (
      <div className="bookshelf">
        <h2 className="bookshelf-title">{title}</h2>

        <div className="bookshelf-books">
          <ol className="books-grid">{books.map(renderBook)}</ol>
        </div>
      </div>
    );
  return (
    <div className="list-books">
      <div className="list-books-title">
        <h1>MyReads</h1>
      </div>

      <div className="list-books-content">
        <div>
           {renderBookShelf(props.books.filter((book) => book.shelf === 'currentlyReading'), 'Currently Reading')}
           {renderBookShelf(props.books.filter((book) => book.shelf === 'wantToRead'), 'Want to Read')}
           {renderBookShelf(props.books.filter((book) => book.shelf === 'read'), 'Read')}
        </div>
      </div>
    </div>
  );
}
Component.propTypes = propTypes;
Component.defaultProps = defaultProps;
export default Component;

import React，{useState}来自“React”；
从“道具类型”导入道具类型；
const propTypes={}；
const defaultProps={}；
功能组件（道具）{
const[，setShowSearchPage]=使用状态（false）；
const renderBook=（book）=>(


);
const renderBookShelf=（书籍、标题）=>(
{title}
{books.map（renderBook）}
);
返回(
MyReads
{renderBookShelf（props.books.filter（（book）=>book.shelf==='currentlyReading'），'currentlreading'）}
{renderBookShelf（props.books.filter（（book）=>book.shelf==='wantToRead'），'wantoread'）}
{renderBookShelf（props.books.filter（（book）=>book.shelf==='read'），'read'）}
);
}
Component.propTypes=propTypes；
Component.defaultProps=defaultProps；
导出默认组件；

重构现有内容的方法有很多，但我认为您需要的是：

function Home({books, changeShelf}) {
  const [, setShowSearchPage] = useState(false)
  const shelves = {
    currentlyReading: 'Currently Reading',
    wantToRead: 'Want to Read',
    read: 'Read',
  }

  return (
    <div className="list-books">
      <div className="list-books-title">
        <h1>MyReads</h1>
      </div>
      <div className="list-books-content">
        <div>
          {Object.keys(shelves).map(shelf => (
            <div className="bookshelf">
              <h2 className="bookshelf-title">{shelves[shelf]}</h2>
              <div className="bookshelf-books">
                <ol className="books-grid">
                  {books
                    .filter(book => book.shelf === shelf)
                    .map(book => (
                      <li key={book.id}>
                        <Book
                          book={book}
                          changeShelf={changeShelf}
                          actualShelf={shelf}
                        />
                      </li>
                    ))}
                </ol>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

函数主页（{books，changeself}）{
const[，setShowSearchPage]=useState（false）
常数托架={
currentlyReading:“当前正在阅读”，
wantToRead:“想要阅读”，
读：“读”，
}
返回(
MyReads
{Object.keys（shelf）.map（shelf=>(
{书架[书架]}
{书籍
.filter（book=>book.shelf===shelf）
.map（book=>(


))}
))}
)
}

重构现有内容的方法有很多，但我认为您需要的是：

function Home({books, changeShelf}) {
  const [, setShowSearchPage] = useState(false)
  const shelves = {
    currentlyReading: 'Currently Reading',
    wantToRead: 'Want to Read',
    read: 'Read',
  }

  return (
    <div className="list-books">
      <div className="list-books-title">
        <h1>MyReads</h1>
      </div>
      <div className="list-books-content">
        <div>
          {Object.keys(shelves).map(shelf => (
            <div className="bookshelf">
              <h2 className="bookshelf-title">{shelves[shelf]}</h2>
              <div className="bookshelf-books">
                <ol className="books-grid">
                  {books
                    .filter(book => book.shelf === shelf)
                    .map(book => (
                      <li key={book.id}>
                        <Book
                          book={book}
                          changeShelf={changeShelf}
                          actualShelf={shelf}
                        />
                      </li>
                    ))}
                </ol>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

函数主页（{books，changeself}）{
const[，setShowSearchPage]=useState（false）
常数托架={
currentlyReading:“当前正在阅读”，
wantToRead:“想要阅读”，
读：“读”，
}
返回(
MyReads
{Object.keys（shelf）.map（shelf=>(
{书架[书架]}
{书籍
.filter（book=>book.shelf===shelf）
.map（book=>(


))}
))}
)
}

谢谢您编辑我的代码，@Emile Bergeron。下次发布代码时我会更加小心。谢谢你编辑我的代码，@Emile Bergeron。下次发代码时我会更加小心。嗨，@Raghu Raj Rai。我已经看到了你指给我的答案。在我看来，在他们使用J