.filter und .map in eine Funktion zurück?

Question

Ich beginne mit ReactJs und habe Probleme zu verstehen, wie man den gewünschten Wert von einer Funktion zurückgibt.

Ich schrieb 1400 Code-Zeilen, um diese einfachen Fitness-Studio Zeitplan-Klassen zu tun (example here). Habe meistens hundert Loops gesehen, die gleich aussehen ... Ich bin mir sicher, dass es der schlechteste Weg ist und deshalb poste ich es hier, in der Hoffnung, dass jemand mich in die richtige Richtung bringen kann. Wie dieser Code immer und immer wieder:

const monday0700= this.state.data.map((clase, index) => { 
    if (clase.dia === 1 && clase.horaclase < "08:00") { 
    return (
     <li key={index} className={clase.estilo}>{clase.actividad} 
     <p className="duracion">{clase.duracion}</p> 
     <p className="sala">{clase.hoy} {clase.sala}</p>   
     </li> 
    ) 
    } else { return false } 
}) 

Und dann wieder eine Menge Code das gleiche in Render-Methode suchen:

<div className="horario-container"> 
     <ul className="horario-item">{monday0700}</ul> 
     <ul className="horario-item">{monday0800}</ul> 
     <ul className="horario-item">{...}</ul> 
     <ul className="horario-item">{...}</ul> 
     <ul className="horario-item">{...}</ul> 
</div> 

Sie können eine Vorstellung von diesem schrecklichen Code bekommen ... aber irgendwie funktioniert es! : O

OK, also danach. Ich arbeite gerade an dieser Funktion

filtrarClase(dia, hora) { 
    let data = this.state.data 
    data.filter(clase => { 
     if ((clase.dia === dia) && (clase.horaclase === hora)) { 
      return clase.actividad 
     } else { 
      return false 
     } 
    }) 
    .map((clase,i) => { 
     console.log(clase.actividad) // OK RECEIVE "SpinBike" 
     return (
      <li key={i}> 
       <p>{clase.actividad}</p> //NO WORKING 
      </li> 
     ) 
    })   
} 

mir das bei jedem Aufruf mit den richtigen Ergebnissen einen „console.log“ lassen, aber auf der Seite Druck etwas.

this.filtrarClase(1,'07:30') 

wodurch es dann:

render() { 
    const lunes0730 = this.filtrarClase(1,'07:30') // ANOTHER FAIL TRY 
    console.log('lunes0730: ', lunes0730) // Returns UNDEFINED 

    return (
     <div className="App"> 
      {this.filtrarClase(1,'07:30')} // NOTHING HAPPENS :(   
     </div> 
    ) 
} 

Aber hier stecken ... ich froh sein, wenn mir jemand hilft, vielen Dank.

Answer 1

Da Ihre filtrarClase-Funktion nichts zurückgibt, verwenden Sie return, um das Ergebnis dieser Funktion zurückzugeben.

Sie geben die Elemente innerhalb des Kartenkörpers zurück, diese Elemente sind Array-Elemente. Sie müssen das Array von der filtrarClase-Funktion zurückgeben. diese

Verwendung:

filtrarClase(dia, hora) { 
    let data = this.state.data 
    return data.filter(clase => { //use return 
     if ((clase.dia === dia) && (clase.horaclase === hora)) { 
      return clase.actividad 
     } else { 
      return false 
     } 
    }) 
    .map((clase,i) => { 
     console.log(clase.actividad) // OK RECEIVE "SpinBike" 
     return (
      <li key={i}> 
       <p>{clase.actividad}</p> //NO WORKING 
      </li> 
     ) 
    })   
} 

prüfen diese Schnipsel:

function withoutReturn(){ 
 
    [1,2,3,4,5,6].filter(i => i%2).map(i => i); 
 
} 
 

 
function withReturn(){ 
 
    return [1,2,3,4,5,6].filter(i => i%2).map(i => i); 
 
} 
 

 
a = withoutReturn(); 
 
b = withReturn(); 
 

 
console.log('a', a); 
 

 
console.log('b', b);