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

Question

我正在尝试从 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 记录未定义，并且无法弄清楚为什么会发生这种情况。

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

非常感谢提前:)

Answer 1

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

'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>