Question

我正在学习React并且已经设置了一个小的测试应用程序，该应用程序进行Ajax调用，返回一个JSON对象，我想在我的组件的return方法中迭代它。我已经尝试了所有我能想到的东西并用谷歌搜索过，但就像一个小时后我仍然难倒。

这是我的......

$(build.sourcesDirectory

我在这里做错了什么？有关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' 1}}要访问该值，请执行基本为vals[key]的{{1}}。

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

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

1 个答案: