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

Question

这是我使用 React.js 的第一个项目，我想使用复选框过滤餐厅卡，当它检查它仅显示具有这些过滤器或类型为 true 的餐厅卡（例如音乐和 WIFI）时。 问题是它完美地显示了默认卡，但是在我选中复选框后，它会将所有类型或过滤器值更改为 false，例如 Music 和 WIFI，而不是仅创建或 map 为 false 的卡。 另外，它不会在仔细检查后创建默认卡，你能帮帮我吗

编码：

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

如果要过滤，则需要过滤后的 state 数组

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

在你的渲染方法中你会做

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

或者如果你想有条件地渲染你可以这样做

    <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

在您的过滤 function 中，只需将过滤器添加到您的 state

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

根据您的 state 过滤器列出过滤餐厅

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