Reactjsの選択されたオプションに応じて、新しいビューに配列アイテムを追加するには

Question

私は、Reactプロジェクトでサーバから書籍のリストを取得する作業をしています。各棚には異なる棚に設定するオプションがあります1）現在読書している、2）読んでいる、3）本のユーザーの経験に基づいて読む。各書籍には、3つの棚が記載されるドロップダウンがあります。ユーザーがドロップダウンから棚をクリックすると、選択した棚に書籍が表示されます。そのため、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> 
       } 

コード：

コードがAPIからすべての書籍を取得する

<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つの異なるセクションのための本の3アレイを作成し、各セクションに本を移動してください。誰もこれで私を助けてもらえますか？私は本当にこれに固執しています。進める方法を見つけることができません。

Answer 1

ドロップダウンから棚の上のユーザーがクリックしたら、この本は、これは、おそらく反応する状態でselectedValueを保存する必要がないことを私に伝え選択棚

に表示されます。ドロップダウンアクションアクションが選択されるとすぐに、単にそれを「追加」します。

あなたが説明していることは意味があると思います.3つの別々の書籍の配列を反応状態で保存してから、handleChange関数でブックを適切な配列に追加してください。

（注記：反応におけるベストプラクティスではなく、直接それを変異/追加のあなたの状態からのみ配列をコピーすることである）