Javascript 单击两次后，选择React复选框进行筛选（排序）

这是一个表示餐厅卡片的代码，使用过滤器或表示卡片取决于单击了哪个过滤器，但我这里有一个小问题，在我单击两次复选框后，过滤器和排序方法会工作，您能帮助我吗

下面是完整的代码、过滤器和排序方式代码，上面和下面都有注释，请注意

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)
    let ifMusic;
    let ifWifi;
    let ifPartition;

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

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

    if (resturants.Partition == true){
        ifPartition = "Partition";
    }else{
        ifPartition = "No Partition";
    }
        
    return(
        <Cards
            key={resturants._id}
            theCardId={resturants._id}
            placeName={resturants.Name}
            stars={resturants.Rating}
            PRating={resturants.PRating}
            music= {ifMusic}
            img={resturants.icon} // need uploads file
            status={Status(resturants.OpenTime, resturants.CloseTime)}
            descreption={resturants.Description}
            wifi={ifWifi}
            partition={ifPartition}
        />
    );
}

// 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)){
        return "Open";
    }else{
        return "Close";
    }
}


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

//intialy no data enterd // the types are the filters for each place such as music wifi etc
        this.state = {
            resturants: [],
            Type1: false,
            Type2: false,
            Type3: false,
            Type4: false,
            Type5: false,
            filteredRestraunts:[],
            noPlaceFound: false
    }
    this.onChangeMusic = this.onChangeMusic.bind(this);
    this.onChangeWifi = this.onChangeWifi.bind(this);
    this.onChangePartition = this.onChangePartition.bind(this);
    this.onChangePriceRatinglow = this.onChangePriceRatinglow.bind(this);
    this.onChangePriceRatinghigh= this.onChangePriceRatinghigh.bind(this);
}
componentDidMount(){
    //Get Resturants data, filteredRestraunts used for filtring and sorting the cards
    axios.get('http://localhost:3000/places')
        .then(resp => {
            // console.log(resp)
            this.setState({
                resturants: resp.data,
                filteredRestraunts:resp.data
        })
    })
}

//========================================================//
// Filters
onChangeMusic(e){
    this.setState({Type1: e.target.checked})
    // console.log(this.state.Type1);
    let copy;
    if(this.state.Type1 === true){
        copy =  this.state.filteredRestraunts.filter(Type => {return Type.Music === this.state.Type1})
        this.setState({ filteredRestraunts: copy })
        if(copy.length === 0){
            this.setState({noPlaceFound: true})
        }
    }else{
        copy =this.state.filteredRestraunts;
        this.setState({ filteredRestraunts: copy })
    } 
}

onChangeWifi(e){
    this.setState({Type2: e.target.checked})
    // console.log(this.state.Type2);
    let copy;
    if(this.state.Type2 === true){
        copy =  this.state.filteredRestraunts.filter(Type => {return Type.Wifi === this.state.Type2})
        this.setState({ filteredRestraunts: copy })
        if(copy.length === 0){
            this.setState({noPlaceFound: true})
        }
    }else{
        copy =this.state.filteredRestraunts;
        this.setState({ filteredRestraunts: copy })
    } 
}

onChangePartition(e){
    this.setState({Type3: e.target.checked})
    // console.log(this.state.Type3);
    let copy;
    if(this.state.Type3 === true){
        copy =  this.state.filteredRestraunts.filter(Type => {return Type.Partition === this.state.Type3})
        this.setState({ filteredRestraunts: copy })
        if(copy.length === 0){
            this.setState({noPlaceFound: true})
        }
    }else{
        copy =this.state.filteredRestraunts;
        this.setState({ filteredRestraunts: copy })
    } 
}

//========================================================//
// Sort By
onChangePriceRatinglow(e){
    this.setState({Type4: e.target.checked})
    // console.log(this.state.Type4);
    let copy;
    if(this.state.Type4 === true){
        copy =  this.state.filteredRestraunts.sort((a,b) => { return a.PRating.length - b.PRating.length})
        this.setState({ filteredRestraunts: copy })
        if(copy.length === 0){
            this.setState({noPlaceFound: true})
        }
    }else{
        copy =this.state.filteredRestraunts;
        this.setState({ filteredRestraunts: copy })
    }
}

onChangePriceRatinghigh(e){
    this.setState({Type5: e.target.checked})
    // console.log(this.state.Type5);
    let copy;
    if(this.state.Type5 === true){
        copy =  this.state.filteredRestraunts.sort((a,b) => { return b.PRating.length - a.PRating.length})
        this.setState({ filteredRestraunts: copy })
        if(copy.length === 0){
            this.setState({noPlaceFound: true})
        }
    }else{
        copy =this.state.filteredRestraunts;
        this.setState({ filteredRestraunts: copy })
    }
}
//========================================================//

render(){
    
    return(
        <div className="flexthem">
            <div className="Filters">
                <h4>Filters</h4>
                <label>Music
                <input className="Checkbox" type="checkbox"  id="Type1"  onChange={this.onChangeMusic}></input></label>
                <label>Wifi
                <input className="Checkbox" type="checkbox"  id="Type2"  onChange={this.onChangeWifi}></input></label>
                <label>Partiotion
                <input className="Checkbox" type="checkbox"  id="Type3"  onChange={this.onChangePartition}></input></label>
                <label>Price: Sort by</label>
                <label>Lowest to heighest
                <input type="radio" className="RadioBox" id="Type4" onClick={this.onChangePriceRatinglow}></input></label>
                <label>heighest to Lowest
                <input type="radio" className="RadioBox" id="Type5" onClick={this.onChangePriceRatinghigh}></input></label>
            </div>
            <div className="general-card"> 
                {this.state.filteredRestraunts.map(CreateCards)}
            </div>
            <h1 className="noPlaceFound" style={{display: this.state.noPlaceFound ? 'block' : 'none' }}> No place found</h1>
        </div>
    );
}
}

import React，{Component}来自'React'；
从“axios”导入axios；
从“../../App”导入应用程序；
从“../../Card”导入卡片；
功能创建卡（餐厅）{
//Handel音乐、Wifi、分区（将其从bolean形式转换为字符串）
让我听音乐；
让我来吧；
让我来划分；
if（resturants.Music==true）{
ifMusic=“Music”；
}否则{
ifMusic=“没有音乐”；
}
如果（resturants.Wifi==true）{
ifWifi=“Wifi”；
}否则{
ifWifi=“无Wifi”；
}
if（resturants.Partition==true）{
ifPartition=“Partition”；
}否则{
ifPartition=“无分区”；
}
返回(
);
}
//根据工作时间检查该场所是否开放或关闭
功能状态（打开、关闭）{
const date=新日期（）；
var hours=date.getHours（）；
常量红色=‘红色’；
常量绿色=‘绿色’；
如果（（打开{
//控制台日志（resp）
这是我的国家({
餐厅：resp.data，
filteredRestraunts:各自的数据
})
})
}
//========================================================//
//过滤器
OnChange音乐（e）{
this.setState（{Type1:e.target.checked}）
//console.log（this.state.Type1）；
让我们复制；
if（this.state.Type1==true）{
copy=this.state.filteredRestraunts.filter（类型=>{return Type.Music===this.state.Type1}）
this.setState（{filteredRestraunts:copy}）
如果（copy.length==0）{
this.setState（{noPlaceFound:true}）
}
}否则{
copy=this.state.filteredRestraunts；
this.setState（{filteredRestraunts:copy}）
} 
}
onChangeWifi（e）{
this.setState（{Type2:e.target.checked}）
//console.log（this.state.Type2）；
让我们复制；
if（this.state.Type2==true）{
copy=this.state.filteredRestraunts.filter（类型=>{return Type.Wifi===this.state.Type2}）
this.setState（{filteredRestraunts:copy}）
如果（copy.length==0）{
this.setState（{noPlaceFound:true}）
}
}否则{
copy=this.state.filteredRestraunts；
this.setState（{filteredRestraunts:copy}）
} 
}
onchange分区（e）{
this.setState（{Type3:e.target.checked}）
//console.log（this.state.Type3）；
让我们复制；
if（this.state.Type3==true）{
copy=this.state.filteredRestraunts.filter（类型=>{return Type.Partition===this.state.Type3}）
this.setState（{filteredRestraunts:copy}）
如果（copy.length==0）{
this.setState（{noPlaceFound:true}）
}
}否则{
copy=this.state.filteredRestraunts；
this.setState（{filteredRestraunts:copy}）
} 
}
//========================================================//
//排序
一旦改变价格低（e）{
this.setState（{Type4:e.target.checked}）
//console.log（this.state.Type4）；
让我们复制；
if（this.state.Type4==true）{
copy=this.state.filteredRestraunts.sort（（a，b）=>{返回a.PRating.length-b.PRating.length}）
this.setState（{filteredRestraunts:copy}）
如果（copy.length==0）{
this.setState（{noPlaceFound:true}）
}
}否则{
copy=this.state.filteredRestraunts；
this.setState（{filteredRestraunts:copy}）
}
}
一旦改变，价格高（e）{
this.setState（{Type5:e.target.checked}）
//console.log（this.state.Type5）；
让我们复制；
if（this.state.Type5==true）{
copy=this.state.filteredRestraunts.sort（（a，b）=>{return b.PRating.length-a.PRating.length}）
this.setState（{filteredRestraunts:copy}）
如果（copy.length==0）{
this.setState（{noPlaceFound:true}）
}
}否则{
copy=this.state.filteredRestraunts；
this.setState（{filteredRestraunts:copy}）
}
}
//========================================================//
render（）{
返回(
过滤器
音乐
无线网络
参与
价格：按
最低到最高
从最高到最低
{this.state.filteredRestraunts.map（CreateCards）}
找不到地方
);
}
}

如果您总是在一步之后获得所需的结果，那么这意味着您在执行操作时从状态中获得了过时的值。为了避免在功能组件中使用useEffect，或者在您的情况下，在类组件中使用componentDidUpdate。我认为在onChange函数中设置状态后，您应该执行日志componentDidUpdate中的ical操作（将以“let copy”开头的行和下面的行移动到componentDidUpdate）。

Hi！您能在沙盒中在线再现这种情况吗？