javascript - 反应状态不更新组件上的过滤器
问题描述
我正在构建一个宽度为三个书架(阅读、想阅读、阅读)的 React App。
我为书架创建了一个组件并将其放在 App.js 上。当我更新书籍状态(changeCategory 函数)时,书籍数据确实更新了,但书架组件没有。:(
如何根据“书籍”状态更新我的组件?(我创建了一个 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;
解决方案
问题出在您的 BooksCategory 组件上。在此组件中,在该select
字段中,选项具有 value Reading
,Want to Read
并且Read
您book.shelf
将具有相同的值,但是在使用 filter 时,您正在过滤 value read
、currentlyReading
、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;
推荐阅读
- azure-active-directory - 目录同步 AD 连接多个域
- python - 如何导入自定义图像数据集以进行迁移学习
- javascript - 发送进度条更新时的 ERR_HTTP_HEADERS_SENT (node.js/express)
- python - 将对象传递给 WTForms 中的自定义验证器
- php - 来自 postfix 的电子邮件在 gmail 上被标记为垃圾邮件
- r - 如何在 R 中的条形图标签上添加 $ 符号?[包括图像和代码]
- javascript - 不推荐使用 jsapi 加载程序加载 Maps API
- angular - Angular 中的自动完成指令
- javascript - Highstock:如何禁用 rangeSelector 响应规则以在元素之间断线?
- java - 使用反射访问 Kotlin Data 类时出现 NoSuchMethodException