React - 如何使用 JSX 在渲染方法中迭代字典

Question

我正在学习 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>
  )
}

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

Answer 1

>{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>
  )
}

如果vals是一个包含{ a: 1, b: 2}的对象，Object.keys(vals)会让你['a', 'b']，在地图的第一次迭代中，key将被'a'并访问该值，请执行本质上vals['a'] => 1 vals[key]

。

我想你对对象解构语法感到困惑。这真的很简单，因为它只是 ES5 JavaScript 上的语法糖(大多数 ES6 只是糖(。阅读MDN关于解构任务的文档，以更好地理解它。