javascript - ReactJS使用对象键生成html

Question

我有以下对象:

现在当我尝试循环它时:

  {Object.keys(this.state.extras).forEach(key => (
                <div style={{'margin-top': '15px'}}>
                    <Addon data={this.state.extras[key]} addonTitle={key} type={key}
                           selectCallback={this.callbackSelectItem}
                           unSelectCallback={this.callbackUnSelectItem}/>
                </div>
            ))}

不显示 html。

我也尝试过:

let extra;    
Object.keys(this.state.extras).forEach(key => {
    extra += (<div style={{'margin-top': '15px'}}>
        <Addon data={this.state.extras[key]} addonTitle={key} type={key}
               selectCallback={this.callbackSelectItem}
               unSelectCallback={this.callbackUnSelectItem}/>
    </div>);
});

但是这会返回“[object Object][object Object]”

有人能看出我做错了什么吗？

更新

当我把它放在state上时，对象键是extras

Answer 1

除了 @Chris 在上面的评论中提到的与在组件中正确使用 extra 和 extras 相关的内容(可能是也可能不是错误)之外，主要问题不是渲染 HTML 如下:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

forEach 返回 undefined，将其更改为使用 .map。

undefined 不会渲染任何内容，而 JSX 数组将渲染为 HTML(需要 key 属性)

此外，forEach 会改变底层数组，因此请谨慎使用。

您的代码可能需要进行如下更改:

{Object.keys(this.state.extras).map(key => (
  <div style={{'margin-top': '15px'}} key={key}>
      <Addon data={this.state.extras[key]} addonTitle={key} type={key}
             selectCallback={this.callbackSelectItem}
             unSelectCallback={this.callbackUnSelectItem}/>
  </div>
))}