下拉过滤器在 React 中显示不正确的结果

Question

显示屏应根据复选框和下拉列表中选择的值显示结果。虽然复选框运行良好并相应地显示结果，但选择的下拉列表未显示正确的显示。只显示上次点击的值，不显示当前值。

如果我先选择下拉列表然后应用复选框过滤器，则显示也不正确。

这是我的代码：

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;

Code Sample