Map函数中的React Map函数

Question

我是一个非常新的反应，我找不到关于以下问题的信息。

我有一个对象数组，对象包含数组。我尝试使用map函数来映射对象的元素，然后再次使用map函数来映射子数组的元素。

请在render方法中查看以下代码：

        <div>
                {this.state.questionarray.map( (item) => (<p>Question {item.questionno}<input type="text" id={item.questionno} />
                                                            <button id={item.questionno} onClick={this.handleAddAnswer}>Add Answer</button>
                                                            {item.answers.map( (ans) => ({ans.answerno}))}</p>
                ) ) }
            </div>

通过上面的代码，我得到了“编译失败...意外的令牌，预期的'，'”。如果我删除内部映射并将其替换为item.answers.length，那么我将获得数组长度，这表明数组确实存在。我认为这与JSX识别的语法有关。有人能帮上忙吗？有没有正确的方法来做这件事？

Answer 1

只需将Felix's comment放在答案框中，因为它是一个答案，{ans.answerno}就应该是ans.answerno，因为map回调不是JSX上下文，并且{ans.answerno}不是有效的JavaScript (在JavaScript表达式上下文中)。

<div>
{this.state.questionarray.map( (item) => (
    <p>Question {item.questionno}
        <input type="text" id={item.questionno} />
        <button id={item.questionno} onClick={this.handleAddAnswer}>Add Answer</button>
        {item.answers.map( (ans) => (ans.answerno  /* <== No {} around this */))}
    </p>
))}
</div>