Javascript 如何使用循环构造JSX

我是React/Javascript新手，正在尝试使用循环构建JSX“树”，以避免硬编码数据

我想我的主要问题在于无法零碎地构造JSX；VisualStudio代码需要顶级开始JSX标记的结束标记。在这种情况下。但是，由于我正在建造它的碎片，这是不可能的

<>所以我试着从我的逻辑中取出，然后在渲染函数中使用，在这些标签中间有一个单独的函数调用。但那留给我的是

index.js:2178 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in div (created by Container)
    in Container (at RequestPlaceholders.js:45)
    in div (at RequestPlaceholders.js:41)
    in RequestPlaceholders (at App.js:80)
    in div (at App.js:79)
    in div (at App.js:65)
    in div (at App.js:64)
    in App (at index.js:8)

如果我没有准确地表达我的问题，我的代码就在这里

有人能告诉我正确的方向吗？

您需要调用renderPlaceholders函数

render() {
  return (
    <div>
      <h2 className="subtitle">
        {this.props.selectedAPI} Placeholders
      </h2>
      <Container>
        {this.renderPlaceholders()}
      </Container>
    </div>
  );
}

---

需要是{this.renderPlaceholders}与您的错误无关，但请记住向行组件添加键，例如@Kunukn只是为了我的教育。。。为什么？@runelynx键有助于识别哪些项目已更改、已添加或已删除。应该为数组中的元素提供键，以给元素一个稳定的标识。现在，它不会出错。但一旦Chrome进入这个循环逻辑，应用程序就会死掉。。。最终，由于内存即将耗尽，Chrome暂停处理。在我的循环中有什么值得崩溃的吗？@runelynx我已经更新了第二个问题的答案

for (var i = 0; i < this.props.apiPlaceholders.length; i+=2)