javascript - 下拉过滤器在 React 中显示不正确的结果
问题描述
显示屏应根据复选框和下拉菜单中选择的值显示结果。虽然复选框运行良好并相应地显示结果,但选择的下拉菜单未显示正确的显示。它仅根据上次单击的值而不是当前值显示显示。
如果我先选择下拉菜单然后应用复选框过滤器,则显示也不正确。
这是我的代码:
import { React, useState } from "react";
import BookData from "../data/bookData.json";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import { Checkbox, Typography } from "@material-ui/core";
import Grid from "@material-ui/core/Grid";
import "../style/search.css";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
const BookDisplay = (props) => {
const allBooks = BookData.book.map((books) => {
return books;
});
const [edition, setEdition] = useState(""); // dropdown state
const [activeFilter, setActiveFilter] = useState([]);
const [filteredResult, setFilteredResult] = useState(allBooks);
//Building DropDown Filter
const uniqueEditions = [
...new Set(
BookData.book.map((allEditions) => {
return allEditions.edition;
})
)
]; // filters out all the unique edition of the books
const editionDropdown = uniqueEditions.map((edition) => (
<option value={edition}>{edition}</option>
));
editionDropdown.unshift(<option value="">All Editions</option>);
//Making a checkbox
const uniqueGenre = [
...new Set(
BookData.book.map((bookGenre) => {
return bookGenre.genre;
})
)
];
//adding checked =false falue for every object
uniqueGenre.map((obj) => ({ ...obj, Active: false }));
// filtering result based on checkbox value
const handleCheckBox = (filter) => {
const newFilter = activeFilter.includes(filter)
? activeFilter.filter((f) => {
return f !== filter;
})
: [...activeFilter, filter];
setActiveFilter(newFilter);
console.log(allBooks);
const filteredList =
newFilter.length > 0
? allBooks.filter((item) => newFilter.includes(item.genre))
: allBooks;
console.log(filteredList);
setFilteredResult(filteredList);
console.log("filteredresult in checkbox", filteredResult);
};
//handling dropdown change
const handleDropDownChange = (event, name) => {
event.preventDefault();
setEdition({
[name]: event.target.value
});
const searchedBooks = filteredResult.filter((filteredBooks) => {
return Object.entries(edition).every(([key, value]) => {
if (!value) return true;
console.log(`${key}: ${value}`);
return filteredBooks[key] === value;
});
});
setFilteredResult(searchedBooks);
};
return (
<div>
<form className="Search">
<label>Edition</label>
<select
defaultValue={edition}
onChange={(e) => handleDropDownChange(e, "edition")}
>
{editionDropdown}
</select>{" "}
</form>
<Grid>
{uniqueGenre.map((genre, index) => (
<FormGroup key={index}>
<FormControlLabel
control={<Checkbox name={genre} />}
label={genre}
value={genre}
checked={genre.Active}
onChange={() => handleCheckBox(genre)}
color="Primary"
/>
</FormGroup>
))}
<Grid></Grid>
<Grid xs={9}>
<div className="container">
{filteredResult.map((bookData) => (
<Card key={bookData.id}>
<CardActions>
<CardContent>
<Typography className="avatar">
<div>
<img src={bookData.imgUrl} alt="img" />
</div>
<span>
<u> {bookData.title}</u>
</span>
</Typography>
<br />
<div className="book-Info">
<Typography>
<b>Price:</b> {bookData.price}
</Typography>
<Typography>
<b>Author:</b>
{bookData.author}
</Typography>
<Typography>
<b>Year:</b>
{bookData.year_written}
</Typography>
<Typography>
<b>Edition:</b> {bookData.edition}
</Typography>
<Typography>
<b>Genre:</b> {bookData.genre}
</Typography>
</div>
</CardContent>
</CardActions>
</Card>
))}
</div>
</Grid>
</Grid>
</div>
);
};
export default BookDisplay;
解决方案
推荐阅读
- php - 重写规则以处理同一域中的 mediawiki 和 wordpress 安装
- python - 如何从python中的许多word文档中的多个表中提取所有数据(直接从MS Word中提取数据)?
- javascript - three.js 的 EventDispatcher 可以用于类之间的通信吗?
- c# - How to uncheck other checkboxes or uncheck radio button?
- .htaccess - htaccess - how to add automatically "http://servename.com/" to all internat urls?
- c - 查找在数组中出现两次的数字
- typescript - 类型 'string' 不可分配给类型 '"foo"'
- css - 为什么身体的上边距还在塌陷?
- html - How to make font size in textarea same as input field in CSS?
- c++ - Impact of setting CMAKE_CXX_FLAG in a C++ project