Всем привет. Есть компонент такого содержания. Очень условно, т.к. компонент

Question

Всем привет. Есть компонент такого содержания. Очень условно, т.к. компонент

из 500+ строк
const CoursePage = () => {
const { chapterPosition, courseTaskPosition } = useParams<Params>()
const [tasksHeading, setTasksHeading] = useState<any>([])
const [task, setTask] = useState<TasksTypesUnion>()

let taskRender

switch(task.type) {
case 'A':
taskRender = (
<ComponentA task={task}>
)
case 'B':
taskRender = (
<ComponentB task={task} solved={taskHeading.dto[+courseTaskPosition - 1].solved>
)
}
return (
<BreadCrumbs />
<div>{taskRender}</div>
)
}

При каждом изменении в useParams происходит загрузка данных из api (c помощью useEffect), после которого происходит setTasksHeading. taskHeading - объект, который имеет в себе массив dto, причем при изменении chapterPosition длина массива может отличаться от предыдущей.
Проблема:
если изначально в компоненте из api был загружен taskHeading.dto одной длины (например 3), а затем, при изменении chapterPosition через <Link> на 5 происходит перерендер компонента, который использует старые данные, то в switch при выполнении taskHeading.dto[+courseTaskPosition - 1].solved сыпется ошибка, что невозможно получить .solved of undefined (оно и логично, в стейте остался taskHeading.dto с длиной 3, который асинхронно потом будет загружен в useEffect, а chapterPosition уже изменился). Как быть в такой ситуации? Мне необходимо, чтоб при изменении chapterPosition успевали загрузиться данные до рендера.

#frontend #javascript #programming #react.js #russian

0

17.05.2021

2 ответов

13 просмотров

Alexey Автор вопроса

либо каким-то образом очищать стейт taskHeading при изменении chapterPosition. но я так понимаю, что добиться этого также с помощью useEffect невозможно, потому что сначала произойдет опять же рендер, а только потом хук эффекта. только если передавать setTaskHeading() в Link через который происходит изменение chapterPosition. если так вообще сработает..

0

17.05.2021

Vladimir Kurchatkin · Accepted Answer

Vladimir Kurchatkin

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

0

17.05.2021

169 похожих чатов

Всем привет. Есть компонент такого содержания. Очень условно, т.к. компонент

2 ответов

Похожие вопросы