.filter和.map轉換成函數返回？

Question

我從ReactJs開始，並且遇到麻煩，理解如何從函數返回所需的值。

我寫了1400條代碼行來完成這個簡單的健身計劃分類（example here）。大多數百個循環看起來是一樣的......我相信這是最糟糕的方式，因此我在這裏發佈它，希望有人能讓我走向正確的方向。 這樣的代碼了一遍又一遍：

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

，然後又有很多代碼看相同的渲染方法：

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

你可以得到這個可怕的代碼的想法......但不知何故它的工作！ ：O

好的，那之後。我工作的這個功能

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

這讓我得到一個「的console.log」與每個調用正確的結果，但打印頁面上的任何內容。

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

然後使其：

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

但堅持在這裏...... 我會很高興，如果有人可以幫助我，非常感謝。

Answer 1

因爲您的filtrarClase函數沒有返回任何東西，所以使用return返回該函數的結果。

您正在返回地圖體內的元素，那些元素將是一個數組元素，您需要從filtrarClase函數返回該數組。

使用此：

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

檢查這個片段：

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