在React JSX中循环内部的循环

Question

我正在尝试使用React JSX在循环内部嵌套另一个循环，代码如下：

{this.state.ans.map(function(item) {
    return (
        {this.state.quest.map(
            function(item1) {return (item1)}
        )}        
        {item}
    )
})}

这个不起作用，有其他的建议吗？

- Hugo Del-Negro

---

渲染函数内部就这些内容吗？最终想要返回什么？通常你希望在所有循环完成后返回所有循环的结果。 - Rodius

Answer 1

你在第一个map语句中忘记了包装

标签：

render() {
  return (
    <div>
      {this.state.ans.map(item =>
        <div> // this div was missing
          {this.state.quest.map(quest => quest)}
          {item}
        </div>
      )}
    </div>
  )
}

- Hemerson Carlin

---

太好了，没错那就是问题所在！ - Hugo Del-Negro

Answer 2

像这样尝试：

render(){
    return (
        .
        .
        .
        {this.state.ans.map((item) => {
            return (
                <div>
                    {this.state.quest.map((item1) => { 
                           return (item1); 
                        }
                    )}        
                   {item}
               </div>
            );
        })}
    );
}

基本思想是，你应该返回一个单一的元素 - 在我的例子中是一个 div（使用最新的react版本时，你不必这样做）。此外，为了让this引用正确的上下文，使用lambda表达式。

如果你不使用ES6，可以在render方法的开头添加以下语句：

var that = this;

然后使用that与return中的function(){}语法。

- Martin Shishkov