@sidorchik

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

У меня есть тестовый каталог с темами. Тем обычно 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] }
	});
};

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

Любым другим советам о рефакторинге буду благодарен.
  • Вопрос задан
  • 42 просмотра
Решения вопроса 1
@dimoff66
Кратко о себе: Я есть
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] }
  });
};
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы