[英]reactjs how to call method inside map function
I can't make something as simple like that working. 我不能像工作一样简单。 It seems that the parser as a hard work to understand whats inside
似乎解析器作为一项努力工作来理解里面的内容
{[1, 2, 3].map((file, idx) =>
this.r_test()
)}
Where r_test is defined like: 其中r_test的定义如下:
r_test = (idx) => {
<div className="input-field">
<label className="active">Titre</label>
</div>
}
And if I write multiligne function, I need to use bracket inside. 如果我写multiligne函数,我需要在里面使用括号。 I know map is async and this is not my "this" as expected.
我知道地图是异步的,这不是我预期的“这个”。 But how can I deal and simply write instruction (loop + method call), without to have parser problem or scoping problem ?
但是如何处理并简单地编写指令(循环+方法调用),而不会出现解析器问题或作用域问题? What is hard to me is js not throwing error but simply make it as a no op.
对我来说很难的是js不会抛出错误,而只是将其作为一个无操作。
{[1, 2, 3].map((file, idx) =>
{this.r_test()
this.r_test()
this.r_test()
}
)}
edit 编辑
What people suggested me is not working. 人们建议我做的不行。 calling this inside a map call didn't not work for me.
在地图调用中调用它并不适合我。 The return missing was a typo, but that's still not make the call of the method.
返回丢失是一个错字,但仍然没有调用该方法。 Worst, the parser is a nightmare to let write your callback inside a method + async map + others methods.
最糟糕的是,解析器是一个让你在一个方法+异步映射+其他方法中编写你的回调的噩梦。 What I finally done is a SYNCHRONE loop with an array in entry, and I return in the end the array with all the XML data.
我最终完成的是一个SYNCHRONE循环,在入口处有一个数组,最后我返回包含所有XML数据的数组。
for people who struggle like me, this is what I have done: 对于像我这样挣扎的人来说,这就是我所做的:
r_aggregate = (qty) => {
let elmt = []
for (let i = 0; i < qty; i++) {
elmt.push(this.r_title())
}
return elmt
}
r_title juste return some random XML. r_title juste返回一些随机XML。 Don't look at the detail of the implementation.
不要看实现的细节。
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>
)
}
And now I can make my call with nested function call. 现在我可以使用嵌套函数调用来调用我的调用。 What map is not able to do.
什么地图无法做到。 The parser at least understand what I wrote:
解析器至少理解我写的内容:
render() {
...
{this.r_aggregate(3)}
}
You need to return from you r_test
, right now you are implicitly returning undefined
. 你需要从你的
r_test
返回,现在你隐式返回undefined
。 Try this: 尝试这个:
r_test = (idx) => (
<div className="input-field">
<label className="active">Titre</label>
</div>
)
Note, I replaced {
with (
. 注意,我替换了
{
with (
。
In your map function, you are returning implicitly 在map函数中,您将隐式返回
{[1, 2, 3].map((file, idx) => // implicit return since no `{}`
this.r_test()
)}
however you are not returning anything from r_test 但是你没有从r_test返回任何东西
r_test = (idx) => {
<div className="input-field">
<label className="active">Titre</label>
</div>
}
What you can do is 你能做的是
r_test = (idx) => {
return <div className="input-field"> // return explicitly
<label className="active">Titre</label>
</div>
}
or 要么
r_test = (idx) => ( //implicit return
<div className="input-field">
<label className="active">Titre</label>
</div>
)
when you don't return anything from r_test
, you are essentially returning undefined
from map 当你没有从
r_test
返回任何东西时,你实际上是从map中返回undefined
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.