在 React.js 中使用复选框过滤卡片时面临的一些问题

Question

this is my first project using React.js, I want to filter the restaurants cards using checkbox when it it check it show only the restaurants cards with these filters or types true such as the music and WIFI. The problems are it show the default cards perfectly but after I checked the checkbox it's change the all type or filters values into false such as Music and WIFI instead of create or map only the cards that false. In addition, it will not create the default cards after double check, can you please help me

The code:

import React, { Component } from 'react';
import axios from 'axios';
import App from "../App";
import Cards from "../Card";

function CreateCards(resturants) {
//Handel the Music, Wifi, Partition (to transfer it from bolean form into string)
    if (resturants.Music == true){
        resturants.Music = "Music";
    }else{
        resturants.Music = "No Music";
    }

    if (resturants.Wifi == true){
        resturants.Wifi = "Wifi";
    }else{
        resturants.Wifi = "No Wifi";
    }

    if (resturants.Partition == true){
        resturants.Partition = "Partition";
    }else{
        resturants.Partition = "No Partition";
    }
        
    return(
        <Cards
            key={resturants._id} // done
            theCardId={resturants._id} // done
            placeName={resturants.Name} // done
            stars={resturants.Rating} // done
            PRating={resturants.PRating} //until filters
            music= {resturants.Music} // done
            img={resturants.icon} // need uploads file
            status={Status(resturants.OpenTime, resturants.CloseTime)} // done
            descreption={resturants.Description} // done
            wifi={resturants.Wifi} // done
            partition={resturants.Partition} // done
        />
    );
}
// Check if the place is open or closed depending on the work hours
function Status (Open, Close){
    const date = new Date();
    var hours = date.getHours();
    const red = 'red';
    const green = 'green';
    if ((Open <= hours) && (hours < Close)){
        // console.log("Open");
        return "Open";
    }else{
        // console.log("Close");
        return "Close";
    }
}

export default class Resturants extends Component {
//constructor elemnts in login
    constructor(props){
        super(props);

//intialy no data enterd
        this.state = {
            resturants: [],
            filter: ""
    }
    this.Filtering = this.Filtering.bind(this);
}
 componentDidMount(){
    //Get Resturants data
    axios.get('http://localhost:3000/places')
        .then(resp => {
            console.log(resp)
            this.setState({
                resturants: resp.data
   })
 })
}

Filtering(e){
    // this.setState({filter:e.target.value});
    e.preventDefault();
    this.state.resturants.filter(Type => {
        //  console.log(Type.Music === true);
        
    })
}

render(){
    
    return(
        <div className="flexthem">
            <div className="Filters">
                <h4>Filters</h4>
                <input className="Checkbox" type="checkbox" id="Type1" value="" onClick={this.Filtering}></input>
            </div>
            <div className="general-card"> 
                {this.state.resturants.map(CreateCards)} 
            </div>
        </div>
    );
}
}

Answer 1

If you want to filter you need a filtered state array

Filtering(e){
    e.preventDefault();
    const checked = e.target.value;
    const copy =  this.state.resturants.filter(Type => Type.Music === checked)
    this.setState({ filteredRestraunts: copy })
}

And in your render method you would do

        <div className="general-card"> 
            {this.state.filteredRestraunts.map((restraunt) => {
              const { Music } = restraunt;
              return <div> {Music ? 'This has music' : 'Does not have music'} 
                     </div>
            })} 
        </div>

Or if you want to conditionally render you can do it like this

    <div className="general-card"> 
     {this.state.resturants.map((restraunt) => {
      const { Music } = restraunt;
      return (
       <div>
         {Music ? 'This has music' : 'Does not have music'}
       </div>
     )
     })} 
    </div>

Answer 2

In your filtering function just add the filter to your state

Filtering(e){
    this.setState({filter:e.target.value});
}

While listing filter the restaurants based on your state filter

 <div className="general-card"> 
   {this.state.resturants.filter(res=> this.state.filter === "" || res.type===this.state.filter).map(CreateCards)} 
</div>