反应中的for循环

Posted 2023-02-21

【中文标题】反应中的for循环

【英文标题】：for loop in react

【发布时间】：2017-10-18 20:07:40

【问题描述】：

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

【问题讨论】：

你能解释更多吗？并显示您正在使用的循环。

不，它正在工作，但我认为这不是最佳做法，所以我想知道以正确的方式去做。

当然，`render() console.log('DATA:', data) 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; ithis.filtrarClases(i, horas[i]) `** "更新问题...**

@AdolfoOnrubia 基本上你想迭代 horas 数组并动态创建 <div><ul>.....</ul></div> 而不是一次又一次地编写所有这些正确吗？

@MayankShukla 正是，希望你能“再次”帮助我！！！ :):)

【参考方案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 数组是常量，所以我建议你在课堂外定义一次。

【讨论】：

谢谢，看起来是我一直在寻找的答案，现在我明白了一点。感谢您的宝贵时间。

很高兴，它帮助了你:)