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

Question

我正在学习 React 并设置了一个小型测试应用程序，它使 Ajax 调用 returns 一个 JSON 对象，我想在 return 我的组件的方法。我已经尝试了我能想到的一切，并用谷歌搜索了这个，但大约一个小时后我仍然感到困惑。

这是我的...

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[key] 本质上是 vals['a'] => 1.

我认为您对对象解构语法感到困惑。它真的很简单，因为它只是 ES5 JavaScript 的语法糖（大多数 ES6 只是糖）。阅读 MDN's docs on Destructuring assignment 以更好地理解它。

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

React - How to iterate over dictionary in render method using JSX?

reactjs

ecmascript-6

react-jsx