Javascript 使用React.js中的复选框过滤卡时遇到的一些问题

这是我第一个使用React.js的项目，我想在选中复选框时使用复选框过滤餐厅卡，仅显示带有这些过滤器或类型为true的餐厅卡，如音乐和WIFI。问题是它完美地显示了默认卡，但在我选中复选框后，它将所有类型或过滤值更改为false，例如音乐和WIFI，而不是仅创建或映射为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>
    );
}
}

import React，{Component}来自'React'；
从“axios”导入axios；
从“./App”导入应用程序；
从“./Card”导入卡片；
功能创建卡（餐厅）{
//Handel音乐、Wifi、分区（将其从bolean形式转换为字符串）
if（resturants.Music==true）{
餐厅。Music=“Music”；
}否则{
resturants.Music=“无音乐”；
}
如果（resturants.Wifi==true）{
resturants.Wifi=“Wifi”；
}否则{
resturants.Wifi=“无Wifi”；
}
if（resturants.Partition==true）{
resturants.Partition=“Partition”；
}否则{
resturants.Partition=“无分区”；
}
返回(
);
}
//根据工作时间检查该场所是否开放或关闭
功能状态（打开、关闭）{
const date=新日期（）；
var hours=date.getHours（）；
常量红色=‘红色’；
常量绿色=‘绿色’；
如果（（打开{
控制台日志（resp）
这是我的国家({
餐厅：resp.data
})
})
}
过滤（e）{
//this.setState（{filter:e.target.value}）；
e、 预防默认值（）；
this.state.resturants.filter（类型=>{
//console.log（Type.Music==true）；
})
}
render（）{
返回(
过滤器
{this.state.resturants.map（CreateCards）}
);
}
}

如果要筛选，则需要筛选状态数组

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>

{this.state.filteredRestraunts.map（（restraunt）=>{
const{Music}=restarun；
return{Music？'This have Music'：'nothave Music'}
})} 

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

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

{this.state.resturants.map（（restarun）=>{
const{Music}=restarun；
返回(
{音乐？'这有音乐'：'没有音乐'}
)
})} 

在过滤功能中，只需将过滤器添加到您的状态即可

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

在列出时，根据您的状态筛选器筛选餐厅

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

{this.state.resturants.filter（res=>this.state.filter===“”| | res.type===this.state.filter.map（CreateCards）}

×感谢您的帮助，我收到一个错误×TypeError:无法将undefinedset filteredRestraunts的属性“map”读取到空数组，否则它将是UndefinedStore很抱歉打扰您，它会打印或映射此音乐而不是默认情况下的卡，而不选中此框，我希望在默认情况下创建或映射cards在我选中该框后，它会创建或映射包含音乐的卡片。我不知道我是否对它做了一些错误的操作，或者在一些更改后更新了帖子，感谢针对之前问题的所有建议