反应状态不更新组件上的筛选器

Question

我正在搭建一个三个书架（阅读、想阅读、阅读）的应用程序。

我已经为工具架创建了一个组件，并将其放在App.js上。当我更新一本书的状态（changeCategory函数）时，书的数据确实更新了，但书架组件没有更新：(

我的代码：

import { useState, useEffect } from 'react';
import BooksCategory from './components/BooksCategory';

import * as BooksAPI from './BooksAPI';

import './App.css';

function App() {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    BooksAPI.getAll().then((data) => {
      setBooks(data);
    });
  }, []);

  const changeCategory = (id, e) => {
    BooksAPI.update(id, e.target.value).then((data) => {
      const updatedBooks = books.map((book) => {
        var temp = Object.assign({}, book);
  
        if (temp.id === id) {
          temp.shelf = e.target.value;
        }
  
        return temp;
      });
  
      setBooks(updatedBooks);

      console.log(books);
    });
  }

  return (
    <div className='wrapper'>
      <aside>
        Aside
      </aside>

      <main>
        <h1>Explore</h1>

        <BooksCategory
          name='Readings'
          books={ books.filter((book) => { return book.shelf === 'currentlyReading' }) }
          onChangeCategory={ changeCategory }
        />

        <BooksCategory
          name='Wanted'
          books={ books.filter((book) => { return book.shelf === 'wantToRead' }) }
          onChangeCategory={ changeCategory }
        />

        <BooksCategory
          name='Read'
          books={ books.filter((book) => { return book.shelf === 'read' }) }
          onChangeCategory={ changeCategory }
        />

        <div>
          { books.map((book) => {
            return (
              <p key={ book.id}>
                { book.id } <br />
                { book.title } <br />
                { book.shelf } <br /><br />
              </p>
            )
          }) }
        </div>
      </main>
    </div>
  );
}

export default App;

我的图书分类组件：

import React from 'react';

function BooksCategory(props) {
    return (
        <div className='booksCategory'>
          <h3>{ props.name }</h3>

          <ul>
            { props.books.map((book) => (
              <li key={ book.id }>
                <div className='bookBackground'>
                  <div className='bookPhoto'>
                    <img src={ book.imageLinks.smallThumbnail } alt={ book.title } />
                  </div>

                  <i className='fa fa-bars'>
                    <select name='teste' onChange={ (e) => { props.onChangeCategory(book.id, e) } }>
                        <option value='Reading'>Reading</option>
                        <option value='Want To Read'>Want To Read</option>
                        <option value='Read'>Read</option>
                    </select>
                  </i>
                </div>

                <p className='bookName'>{ book.title.length <= 30 ? book.title : book.title.substring(0, 27) + '...' }</p>
                <p className='bookCategory'>{ book.categories ? book.categories : 'Others' }</p>
              </li>
            ))}
          </ul>
        </div>
    );
}

export default BooksCategory;

Answer 1

问题在于BookCategory组件。在此组件中，在<代码>选择<代码>字段中，选项有值<代码>读取<代码>，<代码>想要读取<代码>和<代码>读取<代码>以及您的<代码>书籍。书架<代码>将具有相同的值，但在中使用过滤器时，您正在筛选值<代码>读取<代码>当前读取<代码>，<代码>想要读取<代码>。

import React from 'react';

function BooksCategory(props) {
    return (
        <div className='booksCategory'>
          <h3>{ props.name }</h3>

          <ul>
            { props.books.map((book) => (
              <li key={ book.id }>
                <div className='bookBackground'>
                  <div className='bookPhoto'>
                    <img src={ book.imageLinks.smallThumbnail } alt={ book.title } />
                  </div>

                  <i className='fa fa-bars'>
                    <select name='teste' onChange={ (e) => { props.onChangeCategory(book.id, e) } }>
                        <option value='currentlyReading'>Reading</option>
                        <option value='wantToRead'>Want To Read</option>
                        <option value='read'>Read</option>
                    </select>
                  </i>
                </div>

                <p className='bookName'>{ book.title.length <= 30 ? book.title : book.title.substring(0, 27) + '...' }</p>
                <p className='bookCategory'>{ book.categories ? book.categories : 'Others' }</p>
              </li>
            ))}
          </ul>
        </div>
    );
}

export default BooksCategory;