时间戳

首页 > 解决方案 > 如何访问对象上的子键值并克隆该对象

javascript - 如何访问对象上的子键值并克隆该对象

问题描述

我正在尝试从 React 上的对象创建一个列表。在继续之前，我将分享我的代码：

const genres = {
  Rock: {
    album1: '',
    album2: '',
  },
  Jazz: {
    album1: '',
    album2: '',
  },
  Pop: {
    album1: '',
    album2: '',
  }
};


let myFunc = genress => {
  let newObject = {};
  Object.keys(genress).map(gen => {
    newObject[gen] = 'a';
    let newChild = newObject[gen];
    let oldChild = genress[gen];
    
    Object.keys(oldChild).map(gen2 => {
      newChild[gen2] = 'b';
      let newGrandChild = newChild[gen2];
      console.log(newGrandChild);
    })
    
  });
  return newObject;
}

myFunc(genres);

我想在列表中呈现该对象。

<ul>
  <li>Rock
    <ul>
      <li>album1</li>
      <li>album2</li>
    </ul>
  </li>
</ul>
...And so on

在将它放在 React 上之前，我正在尝试它的正常功能。我正在制作一个新对象，只是为了确保我获得了正确的值。问题是，当我在函数末尾返回新对象时，它返回流派而不是专辑，只有我在第一个 Object.key 中设置的“a”。第二个 Object.key 上的 console.log 记录未定义，无法弄清楚为什么会发生这种情况。

我的想法是访问对象上的每个级别，这样我就可以将它们设置为变量并将它们返回到渲染的组件上。我会制作更多关卡：流派 -> 乐队 -> 专辑 -> 歌曲。

提前非常感谢:)

标签： javascriptobject

解决方案

据我所知，您正在错误地迭代对象。

'a' 是唯一出现的原因是，每次运行循环并将当前键设置为该值时，您都在硬编码。

所以基本上你的代码不起作用，因为你将当前键的值设置为'a'，它是一个字符串，所以'a'上没有键，所以第二个循环不会产生任何东西。

 newObject[gen] = 'a'; // you are setting obj[Rock]='a'
let newChild = newObject[gen]; // this is just 'a'
let oldChild = genress[gen]; // this is just 'a'
Object.keys(newObject[gen]) // undefined

我认为您正在尝试做的是迭代对象，然后在列表中呈现该对象的内容。

如果以下内容回答了您的问题，请告诉我。

您可以在此处查看代码： https ://codesandbox.io/s/elastic-dhawan-01sdc?fontsize=14&hidenavigation=1&theme=dark

这是代码示例。 

import React from "react";
import "./styles.css";
const genres = {
  Rock: {
    album1: "Hello",
    album2: "Rock 2"
  },
  Jazz: {
    album1: "",
    album2: ""
  },
  Pop: {
    album1: "",
    album2: ""
  }
};

const createListFromObject = (key) => {
  return (
    <div>
      <h1>{key}</h1>
      <ul>
        {Object.entries(genres[key]).map(([k, v], idx) => (
          <li key={`${key}-${k}-${v}-${idx}`}>{`Key: ${k}  Value ${v}`}</li>
        ))}
      </ul>
    </div>
  );
};
export default function App() {
  return (
    <div className="App">{Object.keys(genres).map(createListFromObject)}</div>
  );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

推荐阅读