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