如何在返回函数内返回两个map值 - 反应js

时间:2018-04-22 12:38:33

标签: javascript reactjs

这是我的json回复:

[
    [
        {
            "id": "12687",
            "user": ".",
            "comment": "همه چیز خیلی خوب بود.",
            "isadmin": false,
            "answer": [
                [
                    {
                        "id": "12692",
                        "user": "admin",
                        "comment": "سلام دوست عزیز. با تشکر از نظر شما",
                        "isadmin": true,
                        "answer": []
                    }
                ],
                [
                    {
                        "id": "12724",
                        "user": ".",
                        "comment": "تشکر",
                        "isadmin": false,
                        "answer": []
                    }
                ]
            ]
        }
    ],
    [
        {
            "id": "12688",
            "user": "fatehi",
            "comment": "طعم برگر ها بسیار متفاوت و خوشمزه بود، واقعآ لذت بردم.",
            "isadmin": false,
            "answer": [
                [
                    {
                        "id": "12691",
                        "user": "admin",
                        "comment": "همیشه پیروز و شاد باشید. با تشکر از نظر شما",
                        "isadmin": true,
                        "answer": []
                    }
                ]
            ]
        }
    ],
    [
        {
            "id": "12689",
            "user": "mahaki",
            "comment": "20 دقیقه ای طول کشید تا غذاهامون حاضر بشه اونم بخاطر این بود که خیلی شلوغ بود واگرنه بقیه چیزاشون خیلی خوب بود.",
            "isadmin": false,
            "answer": [
                [
                    {
                        "id": "12690",
                        "user": "admin",
                        "comment": "سلام دوست عزیز. با تشکر از نظر شما",
                        "isadmin": true,
                        "answer": []
                    }
                ]
            ]
        }
    ],
    [
        {
            "id": "12693",
            "user": "پرنیان",
            "comment": "فقط برگرهای توی سینی 4نفره رنگی هستند؟ یا بقیه هم در صورت درخواست با نون رنگی آماده میکنید؟ در نوروز سرویس دهی دارید؟",
            "isadmin": false,
            "answer": [
                [
                    {
                        "id": "12696",
                        "user": "admin",
                        "comment": "بااحترام، دوست عزیز کلیه موارد مطرح شده با هماهنگی و رزرو قبلی امکان پذیر می باشد.",
                        "isadmin": true,
                        "answer": []
                    }
                ]
            ]
        }
    ],
    [
        {
            "id": "12694",
            "user": "پرنیان",
            "comment": "میشه با دوتا شادیاب 1 پک برگر سفارش داد؟",
            "isadmin": false,
            "answer": [
                [
                    {
                        "id": "12695",
                        "user": "admin",
                        "comment": "بااحترام، خیر دوست عزیز هر شادیاب ویژه یک سفارش میباشد.",
                        "isadmin": true,
                        "answer": []
                    }
                ]
            ]
        }
    ]
]

现在我想用两个组件呈现此响应:

1.CommentRow
2.AnswerRow

这是我的代码:

return (
...
{
    this.state.comments.map(item => {
        return (
        <div>
            <CommentRow key={item[0].id} row={item[0]} />
            item[0].answer.map(answer => {
                <AnswerRow key={item[0].id} row={item[0]} />
            })
        </div>
    )
    })
}
)

但它会打印第二个组件:

enter image description here

1 个答案:

答案 0 :(得分:1)

你应该使用{ }

中的任何功能
return (
      <div>
          <CommentRow key={item[0].id} row={item[0]} />
             { 
               item[0].answer.map(() => <AnswerRow key={item[0].id} row={item[0]} /> )
             }
      </div>
)