在地图函数中反应地图函数答案

【问题标题】：React Map Function within Map Function在地图函数中反应地图函数
【发布时间】：2019-05-02 14:58:07
【问题描述】：

我对反应非常陌生，我无法找到有关以下问题的信息。

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

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

        <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 识别的语法有关。任何人都可以帮忙吗？有正确的方法吗？

【问题讨论】：

{ans.answerno} 不是有效的 JavaScript（这不是 JSX 上下文）。你想要ans => ans.answerno。
请提供样品。
非常感谢，这似乎有效。如果我想将 ans.answerno 设置为输入框的 id 属性，它是如何工作的。我试过 "ans => "
这是正确的“{item.answers.map(ans => ())}”吗？当我使用这种语法时，它似乎正在工作。
是的，第二个是正确的。这又在 JSX 内部，所以你需要 {...} 来指示内容应该被评估为 JavaScript。

标签： javascript arrays reactjs

【解决方案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>

【讨论】：