for-loop-in-react

Question

我得到了这个函数，从一个. 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项，所以我肯定做错了什么。提前谢谢。

Answer 1

原因是，因为循环用于迭代数组，所以它永远不会返回任何内容，如果要返回某些内容，请使用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>  
    )      
}

建议：horas数组是常量，所以我建议您在类外定义它一次。