在 React JSX 中循环内循环答案

【问题标题】：Loop inside of a loop, in React JSX在 React JSX 中循环内循环
【发布时间】：2018-05-17 21:13:11
【问题描述】：

我正在尝试渲染反应，jsx，循环内的循环如下：

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

这对任何其他建议都不起作用

【问题讨论】：

是渲染中的所有内容吗？你到底想返回什么？通常你想做所有的循环并在最后返回所有循环的结果。

标签： arrays reactjs loops jsx

【解决方案1】：

您忘记了第一个 map 语句中的包装 div：

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

【讨论】：

很好，是的，这就是问题所在！

【解决方案2】：

试试这样：

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

基本上这个想法是，你应该返回一个元素——在我的例子中是一个div（你不必使用最新的反应版本）。此外，使用 lambdas 以使 this 引用正确的上下文。

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

var that = this;

然后在 return 中使用 that 和 function(){} 语法。

【讨论】：