Reactjs 如何使用JSX在呈现方法中迭代字典？

我正在学习React，并建立了一个小的测试应用程序，它可以进行Ajax调用，返回一个JSON对象，我想在我的组件的返回方法中迭代该对象。我已经尝试了我能想到的一切，并在谷歌上搜索了这个，但大约一个小时后，我仍然感到困惑

这是我所拥有的

render() {
  const { vals } = this.state;
  return (
    <div>
      {/* note that this correctly outputs the value of vals[key]: {vals['key']} */}
      Object.keys({vals}).map((key, index) => ( 
        <p key={index}> this is my key {key} and this is my value {vals[{key}]} </p> 
      ))
    </div>
  )
}

render（）{
const{vals}=this.state；
返回(
{/*请注意，这将正确输出vals[key]的值：{vals['key']}*/}
Object.keys（{vals}）.map（（键，索引）=>）
这是我的键{key}，这是我的值{vals[{key}]}
))
)
}

---

我做错了什么？关于ES6/JSX的良好参考有什么建议吗？我一直在做一些简单的事情，没有好的方法来查找这些信息。

{vals}

从对象中提取

vals

属性。因此

Object.keys（{vals}）

不正确，因为

vals

已经是一个对象。同样，它应该是

{vals[key]}

，而不是

{vals[{key}]}

render(){
  const {vals} = this.state;  // Essentially does: const vals = this.state.vals;
  return (
    <div>
      {
        Object.keys(vals).map((key, index) => ( 
          <p key={index}> this is my key {key} and this is my value {vals[key]}</p> 
        ))
      }
    </div>
  )
}

render（）{
const{vals}=this.state；//实际上是：const-vals=this.state.vals；
返回(
{
Object.keys（vals.map）（（键，索引）=>）
这是我的键{key}，这是我的值{vals[key]}
))
}
)
}

如果

vals

是一个包含

{a:1，b:2}

的对象，则

对象。键（vals）

将获得

['a'，b']

，在映射的第一次迭代中，

键将是
'a'
，若要访问该值，请执行
键（vals）
，它本质上是
vals['a'=>1

我想你被对象解构语法弄糊涂了。它实际上非常简单，因为它只是ES5JavaScript的语法糖（大多数ES6只是糖）。读一读，以便更好地理解它。
好的，我现在明白了。我当时确实很困惑——我想我不确定ES6/JSX从哪里开始/结束。我需要对这两方面都做一些阅读。谢谢你的解释。