在 React JSX 中循环内循环

Posted 2023-02-22

【中文标题】在 React JSX 中循环内循环

【英文标题】：Loop inside of a loop, in 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
    )
)

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

【问题讨论】：

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

【参考方案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() 语法。