Javascript 如何在reactjs中进行复选框筛选并处理状态？并在复选框后显示可用项

我想使用多个复选框制作一个过滤系统。但当我选中一个复选框时，它会过滤状态，但当我取消选中它时，我如何才能恢复状态中的所有数据。此外，如果我选中多个复选框，则它将从筛选项目中筛选

这是我的密码

state = {
  restaurant : [
     {name: 'La mesa', cuisine: ['italian', 'indian']},
     {name: 'Red Bull', cuisine: ['chiness', 'french']}
     {name: 'Purnima', cuisine: ['thai', 'arabic']}
  ]
  cuisine: [
    {id: 1, name: 'italian'},
    {id: 2, name: 'indian'},
    {id: 3, name: 'chiness'}
    {id: 4, name: 'french'},
    {id: 4, name: 'arabic'},
 ]
}

handleCuisineFilter = (e) => {
        if (e.target.checked) {
            const filter =
                this.state.restaurant.length &&
                this.state.restaurant.filter((rest) => rest.cuisine.includes(e.target.value));
            this.setState({ restaurant: filter });
        } else {
            Now when unchecked how i can get previous state???
        }
    };

render() {
  return (
<div>
   {this.state.cuisine.length && this.state.cuisine.map(
     cuisine=> (<li>
                   <input
                    id={cuisine.id}
                    type='checkbox'
                    onChange={this.handleCuisineFilter}
                    name='check'
                    value={cuisine.name}
                    />
              {cuisine.name }  {here will be count of number of restaurant}
               </li>
            ))}
     {this.state.restaurant.length && this.state.restaurant.map(rest=> <h5>rest.name</h5>)}
 </div>

状态={
餐厅：[
{名称：'La mesa'，烹饪：['意大利'，'印度']}，
{名称：'红牛'，烹饪：['中国'，'法国']}
{名称：'Purnima'，菜肴：['thai'，'arabic']}
]
烹饪：[
{id:1，名称：'意大利语'}，
{id:2，名字：'印第安人'}，
{id:3，名称：'chiness'}
{id:4，名字：'法语'}，
{id:4，名称：'阿拉伯语'}，
]
}
handleCuisineFilter=（e）=>{
如果（例如，选中目标）{
常数滤波器=
这个，州，餐馆，长度&&
this.state.restaurant.filter（（rest）=>rest.courine.includes（e.target.value））；
this.setState（{restaurant:filter}）；
}否则{
现在，当取消选中时，我如何获得以前的状态？？？
}
};
render（）{
返回(
{this.state.courine.length&&this.state.courine.map(
烹饪=>（

{courine.name}{这里将统计餐厅的数量}

))}
{this.state.restaurant.length&&this.state.restaurant.map（rest=>rest.name）}

---

我试图通过我的代码进行最好的解释。请帮帮我。提前谢谢你

你必须跟踪每个过滤器的

检查状态

然后每次都针对所有过滤器进行过滤

这是解决办法

编辑

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  state = {
    restaurant: [
      { name: "La mesa", cuisine: ["italian", "indian"] },
      { name: "Red Bull", cuisine: ["chiness", "french"] },
      { name: "Purnima", cuisine: ["thai", "arabic"] },
    ],
    // maintain a checked state for each filter
    cuisine: [
      { id: 1, name: "italian", checked: false },
      { id: 2, name: "indian", checked: false },
      { id: 3, name: "chiness", checked: false },
      { id: 4, name: "french", checked: false },
      { id: 5, name: "arabic", checked: false },
    ],
  };

  setFilter = (cuisine, flag) => {
    this.setState((prevState) => ({
      cuisine: prevState.cuisine.map((c) =>
        // check state for the selected cuisine
        c.id === cuisine.id ? { ...c, checked: flag } : c
      ),
    }));
  };

  handleCuisineFilter = (e, cuisine) => {
    if (e.target.checked) {
      this.setFilter(cuisine, true);
    } else {
      this.setFilter(cuisine, false);
    }
  };

  filterRestaurants = (restaurant) => {
    const checkedFilters = this.state.cuisine.filter((c) => c.checked);
    const noFiltersChecked = checkedFilters.length === 0;

    if (noFiltersChecked) {
      return true;
    } else {
      // EDITED:
      const tmp = checkedFilters.reduce(
        (hasRestaurantAllTheseCuisines, nextCuisine) =>
          (hasRestaurantAllTheseCuisines =
            hasRestaurantAllTheseCuisines &&
            restaurant.cuisine.includes(nextCuisine.name)),
        true
      );

      return tmp;
    }
  };

  render() {
    return (
      <div>
        {this.state.cuisine.length &&
          this.state.cuisine.map((cuisine) => (
            <li key={cuisine.id}>
              <input
                id={cuisine.id}
                type="checkbox"
                onChange={(e) => this.handleCuisineFilter(e, cuisine)}
                name="check"
                value={cuisine.name}
              />
              {cuisine.name} {/* here will be count of number of restaurant */}
            </li>
          ))}
        {/* Use .filter() with cuisine state */}
        {this.state.restaurant.length &&
          this.state.restaurant
            .filter(this.filterRestaurants)
            .map((rest) => <h5 key={rest.name}>{rest.name}</h5>)}
      </div>
    );
  }
}

export default App;

---

这是一个输入错误

餐厅

还是应该是

餐厅

？另外，您正在尝试使用过滤器对原始餐厅进行变异，而不是使用

映射

，并且不对原始餐厅进行变异。感谢您的解决方案，它过滤了数据，但不正确，例如，当我检查其他菜肴时，餐厅仅包含一种菜肴这不可用，但它仍然显示某些餐厅，但该餐厅不包含该菜系我的意思是我需要一些东西，例如，如果我选择了菜系，如果它在任何餐厅都不可用，那么它将显示餐厅的空数组，但您的代码似乎返回了错误的数据。您可以检查一下吗。谢谢，您在您的文档中没有提到这一点问题…如果我理解正确，你需要名单上的每家餐厅都有经过检查的菜系。例如，有4家餐厅和一家餐厅包含“意大利菜”，因此如果我检查了意大利菜，那么只有这家餐厅会显示。如果餐厅菜系包含两种或更多的菜系，如[意大利菜、印度菜]然后，如果我检查了这两种菜肴，那么这家餐厅将不会看到其他餐厅，因为它有我选择的两种菜肴。请重新编写您的代码。谢谢

...
const tmp = checkedFilters.reduce(
  (hasRestaurantAllTheseCuisines, nextCuisine) =>
    (hasRestaurantAllTheseCuisines =
      hasRestaurantAllTheseCuisines &&
      restaurant.cuisine.includes(nextCuisine.name)),
  true
);
...