在 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>