React state 不要更新组件上的过滤器

Question

我正在构建一个宽度为三个书架（阅读、想阅读、阅读）的 React App。

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

如何根据“书籍”state 更新我的组件？ （我创建了一个 div 来显示所有书籍及其状态，并且工作完美。我的问题仅出现在我的 Shelve 组件上）。

我的代码：

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;

我的 BooksCategory 组件：

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

问题出在您的 BooksCategory 组件上。 在这个组件中，在select字段中，选项的值为Reading 、 Want to Read和Read ，并且您的book.shelf将具有相同的值，但是在使用 filter 时，您currentlyReading过滤值read 、 currentReading 、 wantToRead 。

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;