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

Question

我正在学习React,并设置了一个小型测试应用程序,该应用程序进行Ajax调用,返回一个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.

我认为您对Object解构语法感到困惑.这真的很简单,因为它只是ES5 JavaScript的语法糖(大多数ES6只是糖).阅读MDN关于解构分配的文档以更好地理解它.