for循环中的反应 [英] for loop in react

问题描述

我让此函数起作用以从.json文件中获取一些健身课程.

I got this function working to get some gym classes from a .json file.

    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>
        )
    })        
}

没关系，只需将其传递一些日期和时间"，即可返回正确的课程. 但是后来我找不到方法来循环使用此功能...而只能做到这一点****

it's ok, just passing it some "day and hour" will return right classes. But then I can't find a way to loop over this function... and only be able to do this ****

<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次.

Over and over again... 17 times..

            <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"指向我正确的方向，或者希望如此！ 我试过了:

I'm sure you can point me on the right way with a "for" or "forEach", or hope so! I tried this:

    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个项目，因此我肯定做错了.预先感谢.

I tried a for loop but only returns 1 item, so I'm doing something wrong for sure. Thanks in advance.

推荐答案

原因是，for循环用于迭代数组，它永远不会返回任何内容，如果要返回内容，请使用map.

Reason is, for loop is used to iterate the array it will never return anything, if you want to return something then use 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数组是常量，因此我建议您在课堂外定义一次.

Suggestion: horas array is constant so i will suggest you to define it once outside of the class.

这篇关于for循环中的反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！