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

原因是，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>  
    )      
}

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

for loop in react

1 个答案: