for循环中的反应

Z时代
2024-01-10
分类：问答

我让此功能工作以从.json文件中获取一些健身课程。

    filtrarClase(dia, hora) {
    let data = this.state.data
    return data.filter(clase => {
        if ((clase.dia === dia) && (clase.horaclase === hora)) {
            return clase.actividad
        } else { 
            return false
        }
    })
    .map((clase,i) => {
        return (
            <li key={i} className={clase.estilo}>{clase.actividad}
                <p className="duracion">{clase.duracion}</p>
                <p className="sala">{clase.hoy} {clase.sala}</p>
            </li>
        )
    })        
}

没关系，只要经过一些“日期和时间”就会返回正确的类。但是后来我找不到方法来循环使用此功能…而只能做到这一点****

<div className="horario-container">                 
                <ul className="horario-hora">{horas[0]}</ul>
                <ul className="horario-item">{this.filtrarClase(1, horas[0])}</ul>
                <ul className="horario-item">{this.filtrarClase(2, horas[0])}</ul>
                <ul className="horario-item">{this.filtrarClase(3, horas[0])}</ul>
                <ul className="horario-item">{this.filtrarClase(4, horas[0])}</ul>
                <ul className="horario-item">{this.filtrarClase(5, horas[0])}</ul>
                <ul className="horario-item">{this.filtrarClase(6, horas[0])}</ul>                   
            </div>

一遍又一遍… 17次

            <div className="horario-container">                 
                <ul className="horario-hora">{horas[1]}</ul>
                <ul className="horario-item">{this.filtrarClase(1, horas[16])}</ul>
                <ul className="horario-item">{this.filtrarClase(2, horas[16])}</ul>
                <ul className="horario-item">{this.filtrarClase(3, horas[16])}</ul>
                <ul className="horario-item">{this.filtrarClase(4, horas[16])}</ul>
                <ul className="horario-item">{this.filtrarClase(5, horas[16])}</ul>
                <ul className="horario-item">{this.filtrarClase(6, horas[16])}</ul>                   
            </div>

我相信您可以通过“ for”或“ forEach”为我指明正确的方向，或者希望如此！我尝试了这个：

    actualizarLista(dia){
    const horas = ['07:30','08:15','08:30','09:30','10:30','15:00','15:15','15:30','17:30','18:00','18:15','18:30','19:00','19:30','20:00','20:30','21:30']
    for (let i=0; i<horas.length;i++){
        return <ul className="horario-item">{this.filtrarClase(dia, horas[i])}</ul>
    }
}
render() {
    let dias = [1,2,3,4,5,6]
    for (let i=0; i<dias.length;i++){
        this.actualizarLista(i)
    }
    return (
        <div className="App">
            <div className="horario-container">
                <div className="horario-list">{dias}</div> .........

我尝试了for循环，但仅返回1个项目，因此我肯定做错了什么。提前致谢。

回答：

原因是，for循环用于迭代数组，它将永远不会返回任何内容，如果您想返回某些内容，请使用map。

这样写：

actualizarLista(dia){
    const horas = ['07:30','08:15','08:30','09:30','10:30','15:00','15:15','15:30','17:30','18:00','18:15','18:30','19:00','19:30','20:00','20:30','21:30']
    return horas.map((el, i) => {
        return <ul className="horario-item">{this.filtrarClase(dia, el)}</ul>
    })
}
render() {
    let dias = [1,2,3,4,5,6];
    let uiItems = dias.map(i => {
        return  <div className="horario-container" key={i}>
                    {this.actualizarLista(i)}
                </div>            
    })
    return (
        <div className="App">
            {uiItems}
        </div>  
    )      
}