ReactJS如何调用map函数内的方法

Question

我无法让这么简单的事情发挥作用。解析器似乎很难理解里面的内容

 {[1, 2, 3].map((file, idx) =>
                  this.r_test()
              )}

其中 r_test 定义如下:

  r_test = (idx) => {
    <div className="input-field">
      <label className="active">Titre</label>
    </div>
  }

如果我编写multiligne函数，我需要在里面使用括号。我知道 map 是异步的，这不是我预期的“这个”。但是我如何处理并简单地编写指令(循环+方法调用)，而不会出现解析器问题或范围界定问题？对我来说困难的是 js 不抛出错误，而只是将其设置为无操作。

 {[1, 2, 3].map((file, idx) =>
                          {this.r_test()
                          this.r_test()
                          this.r_test()
}
                      )}

编辑

人们建议我的方法不起作用。在 map 调用中调用它对我来说不起作用。返回缺失是一个拼写错误，但这仍然没有调用该方法。最糟糕的是，解析器在方法+异步映射+其他方法中编写回调是一场噩梦。我最终完成的是一个 SYNCHRONE 循环，条目中有一个数组，最后我返回包含所有 XML 数据的数组。

对于像我一样挣扎的人，这就是我所做的:

  r_aggregate = (qty) => {
    let elmt = []

    for (let i = 0; i < qty; i++) {
      elmt.push(this.r_title())
    }
   return elmt
  }

r_title 只是返回一些随机 XML。不要看实现的细节。

 r_title = () => {
    return(
      <div className="input-field">
        <input spellCheck="false" value={this.state.title} onChange={(e) => this.setState({ title: e.target.value }) } id="input_000" type="text" className="validate"></input>
        <label className="active">Titre</label>
      </div>
    )
  }

现在我可以使用嵌套函数调用进行调用。什么 map 都做不到。解析器至少能理解我写的内容:

 render() { 
...              
 {this.r_aggregate(3)}
}

Answer 1

在您的 map 函数中，您隐式返回

 {[1, 2, 3].map((file, idx) =>    // implicit return since no `{}`
              this.r_test()
          )}

但是您没有从 r_test 返回任何内容

r_test = (idx) => {
    <div className="input-field">
      <label className="active">Titre</label>
    </div>
  }

你能做的是

r_test = (idx) => {
   return  <div className="input-field">   // return explicitly
      <label className="active">Titre</label>
    </div>
  }

或

r_test = (idx) => (      //implicit return
    <div className="input-field">
      <label className="active">Titre</label>
    </div>
  )

当您没有从 r_test 返回任何内容时，您实际上是从 map 返回 undefined