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

然后，很多代码在render方法中看起来都是一样的：

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

.filter和.map到函数返回？

1 个答案: