Как лучше организовать стейт каталога с раскрывающимися списками?

Question

[Илья]

У меня есть тестовый каталог с темами. Тем обычно 20 и больше. Если нажать на тему, раскроется список подтем.

<div
	className="Topic"
	data-subtopic-list="subtopicList1"
	onClick={handleTopicClick}
>
	{subtopicLists.subtopicList1 && (
		<div className="Topic-SubtopicList">
			...
		</div>
	)}
</div>

Как вам моя организация стейта?

const [subtopicLists, setSubtopicLists] = useState({
	subtopicList1: false,
	subtopicList2: false,
	subtopicList3: false,
	subtopicList4: false,
	subtopicList5: false,
	subtopicList6: false,
	subtopicList7: false,
	subtopicList8: false,
	subtopicList9: false,
	subtopicList10: false,
	subtopicList11: false,
	subtopicList12: false,
	subtopicList13: false,
	subtopicList14: false,
	subtopicList15: false,
	subtopicList16: false,
	subtopicList17: false,
	subtopicList18: false,
	subtopicList19: false,
	extraSubtopicList1: false,
	extraSubtopicList2: false,
	extraSubtopicList3: false
});

const handleTopicClick = e => {
	e.preventDefault();

	const { subtopicList } = e.currentTarget.dataset;

	setSubtopicLists({
		...subtopicLists,
		...{ [subTopicList]: !subtopicLists[subTopicList] }
	});
};

Будет лучше, если разбить стейт на отдельные переменные?

Любым другим советам о рефакторинге буду благодарен.

Answer 1

[Дмитрий]

1. Жестокий хардкодинг.

subtopicList1: false,
subtopicList2: false,

Что там в пропущенных частях кода даже сложно представить. JSX тоже похоже выводится для каждой темы отдельно. Лучше все повторяющиеся части делать в цикле

2. Вместо

data-subtopic-list="subtopicList1"
 onClick={handleTopicClick}

лучше просто написать

onClick={e => { e.preventDefault(); handleTopicClick('subtopicList1'); }}

и

const handleTopicClick = subtopicList => {
  setSubtopicLists({
    ...subtopicLists,
    ...{ [subTopicList]: !subtopicLists[subTopicList] }
  });
};

Comments

[Илья]

Дмитрий, спасибо за подробный ответ!

> Жестокий хардкодинг
А как в цикле выводить переменные стейта?

[Дмитрий]

const [subtopicLists, setSubtopicLists] = useState(
    (new Array(22)).reduce((obj, _, ind) => {
        const key = ind < 20
          ? `subtopicList${ind + 1}`
          : `extraSubtopicList${ind - 19}`
        obj[key] = false
        return obj
      }, {})
  )

и затем в render

{Object.keys(subtopicLists).map(key => (<div
        className="Topic"
        onClick={e => { e.preventDefault(); handleTopicClick(key)}}
        key={key}
      >
        {subtopicLists[key] && (
          <div className="Topic-SubtopicList">
            ...
          </div>
        )}
      </div>))}

[Илья]

Дмитрий, вы даже написали, как это рендерить. Спасибо!

Извините за наглость, а как тогда вставлять текст тем?

[Дмитрий]

Илья, Извините за наглость, а как вы его вставляли раньше? Мне же надо знать структуру ваших данных, чтобы ответить

[Илья]

Дмитрий, пожалуйста: компонент на Гитхабе.

[Дмитрий]

Илья, Не тестировал, но думаю идея понятна, чтобы исключить этот бессмысленный зверский хардкод

const [subtopicsList, setSubtopicsList] = useState([
    {
      id: 1,
      checked: true,
      subtopics: [
        {id: '1.1', checked: true, title: 'Проценты', a_title: '24 шт', themeNumber: 249},
        {id: '1.2', checked: true, title: 'Проценты И округление', a_title: '9 шт', themeNumber: 5},
      ]
    }, {
      id: 2,
      checked: true,
      subtopics: [
        {id: '2.1', checked: true, title: 'Что-то еще', a_title: '24 шт', themeNumber: 249},
        {id: '2.2', checked: true, title: 'И так далее', a_title: '9 шт', themeNumber: 5},
      ]
    }
  ])

  function handleTopicClick (ind) {
    const list = [...subtopicsList]
    list[ind] = {...list[ind], checked: !list[ind].checked}
    setSubtopicsList(list)
  }

  const handleCheckboxChange = (ind, subind) => {
    const list = [...subtopicsList]
    const topic = list[ind] = {...list[ind]}
    topic.subtopics = [...topic.subtopics]
    topic.subtopics[subind] = {
      ... topic.subtopics[subind],
      checked: ! topic.subtopics[subind].checked
    }
    setSubtopicsList(list)
  };

  {subtopicsList.map((topic, ind) => (<div
    className="Topic"
    onClick={e => { e.preventDefault(); handleTopicClick(ind)}}
    key={topic.id}
  >
    {topic.checked && (
      <div className="Topic-SubtopicList">
        {topic.subtopics.map((subtopic, subind) =>
          (<label className="Link_wrap ConstructorForm-TopicName Label">
              <div className="ConstructorForm-TopicNumber">
                <Checkbox
                  fakeCheckboxClassName="ConstructorForm-TopicSubCheckbox"
                  name={"subtopic" + subtopic.id}
                  value={subtopic.checked}
                  onChange={handleCheckboxChange(ind, subind)}
                />
              </div>
              <div className="ConstructorForm-TopicDesc">
                {subtopic.title}
                <a
                  href={"https://ege.sdamgia.ru/test?theme=" + subtopic.themeNumber}
                  className="Link Link_black"
                >
                  {subtopic.a_title}
                </a>
              </div>
            </label>))}
      </div>
    )}
  </div>))}

[Илья]

Дмитрий, переписал, как вы сказали, спасибо. Теперь вопрос, как выводить дополнительные темы, у которых другая вёрстка? Помогите, пожалуйста: toster.ru/q/676128