Как подгрузить данные из объекта?

Question

[YAHEFID]

Имеется такой объект, он будет у нас в redux. Объект менять не нужно.

const initialState = {
  0: [
    {
      comment: '1 сезон',
      folder: [
        {
          comment: '1 серия'
        },
        {
          comment: '2 серия'
        }
      ]
    },
    {
      comment: '2 сезон',
      folder: [
        {
          comment: '1 серия'
        },
        {
          comment: '2 серия'
        },
        {
          comment: '3 серия'
        }
      ]
    }
  ]
}

Так есть компонент ItemList, это кнопочки:

const ItemList = ({ items }) => {
  const [active, setActive] = React.useState(0);

  return (
    <ul className="items">
      {items.map(({ comment }, index) => (
        <li
          key={index}
          className={active === index ? 'item active' : 'item'}
          onClick={() => setActive(index !== active ? index : -1)}
        >
          {comment}
        </li>
      ))}
    </ul>
  );
};

Используя я сейчас его на данный момент так:

const View = () => {
  return (
    <div className="content">
      <ItemList items={obj[0]} /> // Тут я хочу выгрузить все сезоны
      <ItemList items={obj[0][1]['folder']} /> // тут я хочу выгрузить все серии к сезону, который выбран у нас в active
    </div>
  );
};

Так вот, как мне выгрузить сезоны и все серии к сезону который у нас выбран? Скорее всего, активный элемент я собираюсь вынести в redux. Но так же не знаю как правильно сделать, у нас один компонент, но используются он для двух по факту задач. Выбрать сезон и выбрать серию. Сейчас конечно клики работают на все два этих компонента которые создал.

Объясню в двух словах, что я хочу сделать: есть сериал и вот у вас есть возможность выбрать сезон и серию.

Answer 1

[0xD34F]

Объект менять не нужно.

Нужно.

Так будет лучше, просто поверьте:

const SERIES = [
  {
    comment: '1 сезон',
    folder: [
      { comment: '1 серия' },
      { comment: '2 серия' },
    ],
  },
  {
    comment: '2 сезон',
    folder: [
      { comment: '1 серия' },
      { comment: '2 серия' },
      { comment: '3 серия' },
    ],
  },
];

const ItemsList = ({ header, items, active, onChange }) => (
  <div>
    <h3>{header}</h3>
    <ul className="items">
      {items.map(({ comment }, i) => (
        <li
          className={`item ${active === i ? 'active' : ''}`}
          onClick={() => onChange?.(i !== active ? i : -1)}
        >
          {comment}
        </li>
      ))}
    </ul>
  </div>
);

function App() {
  const [ iSeason, setActiveSeason ] = useState(-1);
  const [ iEpisode, setActiveEpisode ] = useState(-1);
  const season = SERIES[iSeason];
  const episode = season?.folder[iEpisode];

  useEffect(() => {
    setActiveEpisode(-1);
  }, [ iSeason ]);

  return (
    <div>
      <ItemsList
        header="сезоны"
        items={SERIES}
        active={iSeason}
        onChange={setActiveSeason}
      />
      {season && <ItemsList
        header="серии"
        active={iEpisode}
        onChange={setActiveEpisode}
        items={season.folder}
      />}
      {episode && <div>Выбрали: {season.comment}, {episode.comment}</div>}
    </div>
  );
}

Comments

[YAHEFID]

Не нужно. Поверь, если нужно было бы, я сам смог бы решить задачу. Этот объект вообще приходит не от моего сервера

Мне тогда придется менять объект и перезаписывать его, а этого я не хочу делать

[0xD34F]

YAHEFID, да-да, если бы изначально не было дурацкой вложенности, то вы бы всё сами сделали. ВЕРЮ. Ведь это так сложно - добавить [0] не абы куда, а куда надо. Для такого три высших образования нужно, не меньше.

[YAHEFID]

0xD34F, ну да, а то что у нас один компонент который используется по факту на две задачи, тебя вообще не смущает, да? Зачем ты мой код передал под свой? Поражал

[YAHEFID]

0xD34F, че же ты тогда объект передал, когда я написал, что его не нужно менять? Чтобы легче было ответить? Пха

[YAHEFID]

0xD34F, и да, зачем ты для каждого создал стейт? У меня такого тоже нет

[YAHEFID]

0xD34F, до тебя как-раз таки у меня такой код и был и для этого я его сократил по максимум, а ты его на оборот дублируешь. Ты бы наверное еще li в отдельный компонент вынес, че

[0xD34F]

до тебя как-раз таки у меня такой код и был и для этого я его сократил по максимум

YAHEFID, если подобный код и вправду был, тогда зачем сюда было приходить и задавать вопрос? Напоминаю, чего вы хотели:

Объясню в двух словах, что я хочу сделать: есть сериал и вот у вас есть возможность выбрать сезон и серию.

Вот это вот и есть в коде из ответа. Что не так?

зачем ты для каждого создал стейт?

А как вы собираетесь с одним значением указывать сразу и выбранный сезон, и выбранную серию?

че же ты тогда объект передал, когда я написал, что его не нужно менять?

Вы что, и вправду настолько тупы, что неспособны самостоятельно извлечь значение свойства из объекта? Может, вам на фриланс тогда отправиться? - платите деньги, вам всё сделают.

[YAHEFID]

0xD34F, понятно, вырезал слова из контекста. Не способен ответить - не отвечай.

[YAHEFID]

0xD34F, а то взял кусок моего кода и вытащил из него все, чтобы легче было ответить. ДЛЯ ТЕБЯ ДЕБИЛА ЕЩЕ РАЗ ПОЯСНЯЮ: ЗАДАЧА СТОИТ, ЧТО НУЖНО ПЕРЕДАТЬ ОБЪЕКТ В ГОТОВЫЙ КОМПОНЕНТ. Все, глохни лучше от сюда, ты уже из себя построил «программиста»

задача: Разожги огонь без зажигалки
Твое решение: разжигаешь огонь при помощи зажигалки.

Понятно !

[YAHEFID]

0xD34F, ищет он легкие пути. Такие легкие пути у меня уже задача вся была сделана. Ты попробуй ответить на вопрос, который я поставил.

[0xD34F]

Не способен ответить - не отвечай.

YAHEFID, неспособны задать вопрос или понять ответ - не спрашивайте. Тогда вам и не придётся биться в истерике после получения ответа, который не тот или непонятен.

взял кусок моего кода и вытащил из него все, чтобы легче было ответить

Вытащил что? Повторяю, неспособны самостоятельно добавить [0] - катитесь на фриланс.

ЗАДАЧА СТОИТ, ЧТО НУЖНО ПЕРЕДАТЬ ОБЪЕКТ В ГОТОВЫЙ КОМПОНЕНТ

Какой ещё объект, почему в единственном числе? Речь шла про массивы объектов: "тут я хочу выгрузить все сезоны", "тут я хочу выгрузить все серии к сезону".

Такие легкие пути у меня уже задача вся была сделана.

Вы лжёте. Было бы сделано - показали бы.

Ты попробуй ответить на вопрос, который я поставил.

Так уже ответил - прокрутите страницу выше. Что-то не устраивает - объясните, что именно.