如何根据 Reactjs 中的选定选项将数组项添加到新视图中

Question

我正在做一个React项目，其中将从服务器检索书籍列表。每本书都有一个选项，可以设置为不同的书架，例如 1） 当前正在阅读，2） 想要阅读和 3） 根据用户对书籍的体验阅读。每本书都有一个下拉菜单，其中将提到 3 个书架。用户单击下拉列表中的书架后，该书将显示在所选书架上。因此，我能够从 API 检索书籍，但我被困在选择书籍后书籍将被设置为相应书架的地步。

从 API 检索所有书籍的代码：

import React, { Component } from 'react';
class BooksList extends Component {
  state={
    showSearchPage: false,
    books: [],
    selectedValue: 'None'
  }
  handleChange =(e) => {
    this.setState({ selectedValue:e.target.value })
  }
  render() {
    return(
{<div className="book-search">
                  {this.props.books.map( book =>
                    <div className="book">
                      <div className="book-top">
                        <div className="book-cover" style={{ width: 128, height: 193,margin:10, backgroundImage: `url(${book.imageLinks.smallThumbnail})` }}></div>
                        <div className="book-shelf-changer">
                          <select
                            value={this.state.selectedValue}
                            onChange={this.handleChange}>
                            <option value="none" disabled>&nbsp; &nbsp; Move to...</option>
                            <option value="currentlyReading">&#x2714; Currently Reading</option>
                            <option value="wantToRead">&nbsp; &nbsp; Want to Read</option>
                            <option selected="selected" value="read">&nbsp; &nbsp; Read</option>
                            <option value="none">&nbsp; &nbsp; None</option>
                          </select>
                        </div>
                      </div>
                      <div className="book-title">{book.title}</div>
                      <div className="book-authors">{book.authors}</div>
                      <p>{this.state.selectedValue}</p>
                    </div>
              )}
              </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">

                        { this.props.books.map(book =>
                          <li>
                            <div className="book">
                              <div className="book-top">
                                <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${book.imageLinks.smallThumbnail})` }}></div>
                                <div className="book-shelf-changer">
                                  <select
                                    value={this.state.selectedValue}
                                    onChange={this.handleChange}>
                                    <option value="none" disabled>&nbsp; &nbsp; Move to...</option>
                                    <option value="currentlyReading">&#x2714; Currently Reading</option>
                                    <option value="wantToRead">&nbsp; &nbsp; Want to Read</option>
                                    <option selected="selected" value="read">&nbsp; &nbsp; Read</option>
                                    <option value="none">&nbsp; &nbsp; None</option>
                                  </select>
                                  <p>{this.state.selectedValue}</p>
                                </div>
                              </div>
                              <div className="book-title">{this.state.currentlyReadingBooks}</div>
                              <div className="book-authors">{book.authors}</div>
                            </div>
                            </li>
                        )}

所以我想到的解决方案是：我们是否必须为三个不同的部分创建 3 个书籍数组并将书籍移动到每个部分。谁能帮我解决这个问题。我真的被困住了。我不知道如何进行。

Answer 1

用户从下拉列表中单击书架后，该书将显示在所选书架上

这告诉我，您可能不需要将selectedValue存储在 react 状态;一旦选择了下拉操作操作，只需"添加"它即可。

所以是的，我认为你描述的是有道理的 - 在反应状态下存储三个单独的书籍数组，然后在您的 handleChange 函数中，将书籍附加到适当的数组中。

（旁注：React 的最佳实践是从你的状态中复制唯一的数组，而不是直接附加/改变它。