@szQocks

Почему ипортируемый компонент срабатывает быстрее хука в React?

Код в основном компоненте App.js

const instance = axios.create({
baseURL: env.API_URL
});

const [todos, setTodos] = useState();

const getAllTodos = () => {
instance.get()
.then(res => setTodos(res.data))
.catch(err => console.log(err))
};

useEffect(() => getAllTodos(), []);

И в этом же компоненте App я импортирую компонент TodoList и передаю в него стейт todos(то есть полученные данные при запросе через хук useEffect который вызывает функцию getAllTodos.
И проблема в том то что я не успеваю получить данные как мне уже вылетает ошибка из компонента TodoList
о том что todos - undefined при вызове методы map(то есть при отрисовке). Я решил эту проблему костыльно, используя оператор вопроса перед точкой в компоненте TodoList.

todos?.map

Пусть я даже и решил эту проблему костыльно... всё равно не пойму , почему компонент пытается отрендерить todos , быстрее чем срабатывает хук useEffect в родительском компоненте ?
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен
Потому что компоненты никого сами по себе не ждут и рендерятся синхронно, т.е. "прямо сейчас", а ответ от сервера приходит асинхронно, т.е. "когда-нибудь потом". Более того, хук useEffect сам по себе только запускается уже после рендера.

Варианта два:
1. Задать стейт по умолчанию:
const [todos, setTodos] = useState([]);.
Сначала покажет пустой список, потом подгруженный.

2. Не рендерить компонент, пока нет нужных для него данных:
{todos ? <TodoList todos={todos}/> : <LoadingComponent/>}
Сначала покажет какой-нить спиннер, потом подгруженный список.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Kentavr16
Сделайте getlaatodos async function с try и catch. Это должно помочь
Ответ написан
Ваш ответ на вопрос

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

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