在循环内循环,在 React JSX 中

IT技术 arrays reactjs loops jsx
2021-05-16 05:08:55

我正在尝试在 react、jsx、循环内的循环中渲染,如下所示:

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

这不起作用任何其他建议

2个回答

您在第一条map语句中忘记了包装 div

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

像这样尝试:

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

基本上这个想法是,你应该返回一个元素 - 在我的例子中 a div(使用最新的react版本你不必)。此外,使用 lambdasthis来引用正确的上下文。

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

var that = this;

并使用that与事后function(){}里面的语法return