Как сделать рендер на реакте при первой загрузке?

Только начал изучать реакт, не понял одну важную вещь. Данные для компонентов как правило берем в виде json, которые с легкостью получаем в переменную после запросов ajax, но никак не могу нагуглить как же получить json для компонента при первой загрузке страницы, например если бекенд на php то echo json_encode() все равно сначала выведет на страницу а потом уже уже подхватится реактом, подскажите, как организовать вывод данных с сервера, чтобы реакт уже знал с какиеми данными ему работать, может быть echo "script var data ={test: 'yes'} /script" или это изварщение? спасибо заранее
  • Вопрос задан
  • 108 просмотров
Решения вопроса 1
magerrrr
@magerrrr
JS Software Engineer
Для этого в React есть хук useEffect (https://ru.reactjs.org/docs/hooks-effect.html)

Чтобы получить JSON при первой загрузке страницы нужно импортировать хук useEffect. У этого хука (хук = функция) есть 2 обязательных параметра - первый это функция (callback) и второй массив зависимостей (если его оставить пустым, хук сработает всего один раз, как Вам и требуется в задании).

Предлагаю пример кода ниже:
С помощью fetch делаем get запрос за данными, сервер вернет данные и после мы из них получаем json с помощью соответствуюего метода и затем выводим в консоль

import React, { useEffect } from 'react';

const Page = () => {
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => console.log(json))
  }, []);

export default Page;
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
kirbi1996
@kirbi1996
Гугли useEffect, либо если без хуков componentDidMount или как то так)) жизненый цикл компонента в общем
Ответ написан
Ваш ответ на вопрос

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

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