我如何迭代嵌套对象以访问它们在 React Js 中的值

Question

我对此进行了很多搜索，但没有找到合适的答案来解决这个问题。我有一个从获取的数据中创建的对象，结构如下：

{
      id: string,
      title: string,
      price: {
        currency: string,
        amount: number,
      },
      picture: string,
      condition: string,
      free_shipping: string,
      sold_quantity: string,
    };

当我尝试遍历嵌套对象时（第二级）

price: {
        currency: string,
        amount: number,
      },

控制台向未定义抛出错误。我尝试过：Object.keys() 方法或将对象转换为数组，但没有成功。

有谁知道我如何遍历这个对象并获得每个属性的值：货币、金额

提前感谢您的帮助。

Answer 1

首先，我非常感谢我的问题的答案。真的很有帮助！

事实上，我的错误来自我在代码中定义的状态。我将尝试在接下来的几行中解释它。

这个对象结构（如下）是为我从 API 接收数据而设计的：

{
  id: string,
  title: string,
  price: {
    currency: string,
    amount: number,
  },
  picture: string,
  condition: string,
  free_shipping: string,
  sold_quantity: string,
};

API 没有保持我在下面向您展示的相同结构，因此我必须在 fetch 的 promise 中重新采样。但是我重采样的时候没有插入价格object。

所以，当我尝试使用Obj.map 时。 React 爆炸了，对我说它不能在 undefined 上迭代。

这真是令人头疼，因为我试图理解为什么我不能迭代嵌套对象。但归根结底，这不是根本问题。

最后，集成从 API 获取的数据并随后转换为我想要的结构的方法比我想象的要简单。

只需使用点符号，我就可以从嵌套的对象和对象中访问我需要的特定项目。例如：

item.price.amount // Returns 1990
item.price.currency // Returns USD

希望这个答案可以帮助你。但是这个问题让我彻底明白了如何通过Objects.keys(obj).map(key =>(//code))迭代对象

特别感谢@theJuls 的详细解释。

Answer 2

要正确理解该问题，我们确实需要准确了解您尝试迭代对象的方式。正如其他用户所提到的，如何做到这一点的简短答案是

Object.keys(obj).map((key) => { 
    const value = obj[key]
    // Do stuff with value (?)
    return value
})

当然，对于上面的示例，我们不会正确访问嵌套对象 (price) 的键，为此您必须在已有的对象中执行 Object.keys(obj).map(()=>{})。所以是这样的：

Object.keys(obj).map((key) => { 
    const value = obj[key]
    // Do stuff with value (?)
    if (typeof value === 'object') {
        const nestedObjectKeys = Object.keys(value).map((nestedKey) => {
            // Do stuff
        })
    }
    return value
})
})

这是我们确实需要有关您的问题的更多详细信息的地方，如果您知道这是您想要访问和迭代的内容，只需使用相同的东西，但直接在 price 对象上。应该是这样的：

Object.keys(obj.price).map((key) => { 
    const priceValue = obj.price[key]
    // Do stuff with priceValue (?)
    return priceValue
 })

这是一个包含两种情况的简单演示：

const App = () => {

const obj = {
    id: 'my_id',
    title: 'my_title',
    price: {
        currency: 'USD',
        amount: 100,
    },
    picture: 'my_picture',
    condition: 'my_conditon',
    free_shipping: 'free_shipping',
    sold_quantity: 'sold_quantity',
};


  return (
  <div>
    <h3>Example 1: Iterating through the whole object</h3>
    {Object.keys(obj).map((key) => {
      const value = obj[key]
      return (
        <div key={key}>
          {typeof value === 'object'
            ? (
              <div>
                <hr/>
                <h4>Found a nested object! Lets now do another Object.keys().map!</h4>
                {Object.keys(value).map((nestedKey) => (
                  <div key={nestedKey}>{nestedKey}: {value[nestedKey]}</div>
                ))}
                <hr/>
              </div>
            )
            : <span>{key}: {value}</span>
           }
        </div>
      )
    })}
    
    <h3>Example 2: Simply iterating only through the nested object</h3>
    {Object.keys(obj.price).map((key) => (
      <div key={key}>
        {key}: {obj.price[key]}
      </div>
    ))}
  </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

编辑：正如 Drew Reese 指出的那样，在这种情况下，实际上没有理由遍历键而不是值（Object.keys(obj) vs Object.values(obj)）。除非您出于某种原因需要访问密钥。上述所有内容都可以使用Object.values(obj) 以更简洁的方式完成。所以这些例子可能会变成：

Object.values(obj).map((value) => {
   // Do stuff with value (?)
   return value
})

和

Object.values(obj.price).map((value) => {
   // Do stuff with value (?)
   return value
})

Answer 3

你试过这个方法吗？

Object.keys(myObject).map(function(key) {
  
});