[英]React state don't update a filter on a component
I'm building a React App width three bookshelves (Read, Want to Read, Reading).我正在构建一个宽度为三个书架(阅读、想阅读、阅读)的 React App。
I've created a component for shelves and put it on App.js.我为书架创建了一个组件并将其放在 App.js 上。 When I update a book status (changeCategory function), the book data is really updated, but the Shelf component not.
当我更新书籍状态(changeCategory 函数)时,书籍数据确实更新了,但书架组件没有。 :(
:(
How can I update my component based on "books" state?如何根据“书籍”state 更新我的组件? (I've created a div to show all books and their status, and work's perfectly. My problem occurs only with my Shelve component).
(我创建了一个 div 来显示所有书籍及其状态,并且工作完美。我的问题仅出现在我的 Shelve 组件上)。
My code:我的代码:
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;
My BooksCategory component:我的 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;
The problem is with your BooksCategory component.问题出在您的 BooksCategory 组件上。 In this component, in the
select
field the options have value Reading
, Want to Read
and Read
and your book.shelf
will have the same values but when using filter in you are filtering over values read
, currentlyReading
, wantToRead
.在这个组件中,在
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.