Блог

Я пытаюсь создать список из объекта в 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, я пытаюсь использовать его в обычной функции. Я создаю новый объект, просто чтобы убедиться, что я получаю правильные значения. Проблема в том, что когда я возвращаю новый объект в конце функции, он возвращает жанры, но не альбомы, только ‘a’, который я установил в первом Object.key. Консоль.войдите во второй объект. ключевые журналы не определены и не могут понять, почему это происходит.

Моя идея состоит в том, чтобы иметь доступ к каждому уровню объекта, чтобы я мог установить для них переменные и возвращать их в компоненте рендеринга. Я сделаю больше уровней: Жанры -> Группы -> Альбомы -> песни.

Заранее большое спасибо 🙂

Насколько я понимаю, вы неправильно перебираете объект.

Причина, по которой ‘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=14amp;hidenavigation=1amp;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>