Javascript 在react native中的map函数内迭代数组

我有一个功能：

renderConversations(){
    let conversationContent = this.state.conversationArray.map((convObj, i) => {
      return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow]}>
        <Text style= {globalStyle.conversationText}>{ convObj.text }</Text>
        <Text style= {globalStyle.conversationText}>{ convObj.actionButtons }</Text>
      </View>                            
    })
    return conversationContent
  }

renderConversations（）{
让conversationContent=this.state.conversationArray.map（（converabj，i）=>{
返回
{convabj.text}
{convabj.actionButtons}
})
返回会话内容
}

---

我将根据状态变量使用此函数渲染组件。我面临的一个挑战是

convabj.actionButtons

这是一个数组。我想在map函数中迭代它来构建组件。在map函数中是否有这样做的方法，或者我是否需要使用良好的旧for循环？

您可以使用第二个map，但这可能会变得混乱

使用单独的函数返回第二个映射数组如何：

renderActionButtons(actionButtons) {
  return actionButtons.map(button => {
    // Return code here
  }
}

…然后像这样使用：

renderConversations() {
  let conversationContent = this.state.conversationArray.map((convObj, i) => {
    return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow]}>
      <Text style= {globalStyle.conversationText}>{ convObj.text }</Text>
      <Text style= {globalStyle.conversationText}>{ this.renderActionButtons(convObj.actionButtons) }</Text>
    </View>                            
  })
  return conversationContent
}

renderConversations（）{
让conversationContent=this.state.conversationArray.map（（converabj，i）=>{
返回
{convabj.text}
{this.renderActionButtons（convabj.actionButtons）}
})
返回会话内容
}

在map函数中是否有这样做的方法

是的，这将是动态创建ui元素的正确方法。再次使用map并创建元素

检查此示例：

renderConversations(){
    let conversationContent = this.state.conversationArray.map((convObj, i) => {
        return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow]}>
            <Text style= {globalStyle.conversationText}>{ convObj.text }</Text>
            <Text style= {globalStyle.conversationText}>
                { 
                    convObj.actionButtons.map((el, j) => {

                        return /*Code*/

                    }) 
                }
            </Text>
        </View>                            
    })
    return conversationContent
}

renderConversations（）{
让conversationContent=this.state.conversationArray.map（（converabj，i）=>{
返回
{convabj.text}
{ 
convalbj.actionButtons.map（（el，j）=>{
return/*代码*/
}) 
}
})
返回会话内容
}

我需要使用好的旧for循环吗

您也可以使用它，但使用map会很容易，因为直接在JSX中不能使用for循环，所以您需要创建另一个函数，将所有for循环逻辑放在其中，并从map调用该函数

像这样：

renderConversations(){
    let conversationContent = this.state.conversationArray.map((convObj, i) => {
        return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow]}>
            <Text style= {globalStyle.conversationText}>{ convObj.text }</Text>
            <Text style= {globalStyle.conversationText}>
                { 
                    this._fun(convObj.actionButtons)
                }
            </Text>
        </View>                            
    })
    return conversationContent
}


_fun(item){
    //for loop here and return the elements
}

renderConversations（）{
让conversationContent=this.state.conversationArray.map（（converabj，i）=>{
返回
{convabj.text}
{ 
这个._fun（convabj.actionButtons）
}
})
返回会话内容
}
_乐趣（项目）{
//for循环并返回元素
}

是的，这将是正确的方法，使用另一个映射并创建ui元素：）