Задать вопрос
@historydev
Острая аллергия на анимешников
react

При первичном рендеринге, роутер возвращает undefined, что делать?

Доброе утро. Скажите пожалуйста, как передать значение после конечного рендеринга?

import Head from 'next/head';
import TopBar from "../../components/lowLvlComponents/topBar/topbar";
import GetCompanyPage from "../../components/companyPage/company";
import Footer from "../../components/footer/footer";
import {useRouter} from "next/router";

import {url} from "../../serverConfig";

export default function Home() {

    const router = useRouter()
    const id = router.query.id;

    // if(!id) return null; // Если юзать это, то undefined скипается, однако с ним и запрос на сервер почему-то.

    const getCompany = async() => {

        const data = await fetch(`${url}/selectCompany`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                id: id
            })
        });

        return await data.json()

    };

    console.log(id);

    getCompany().then(el => console.log(el));

    return (
        <div className="container">

            <Head>
                <title>Company</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <TopBar />
            <GetCompanyPage company={company} />
            <Footer />

        </div>
    )
}


При первичном рендеринге undefined, следом значение.

Спасибо.
  • Вопрос задан
  • 95 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
@twolegs
Вы получаете значение асинхронно.
1. Для обновления компонента после получения данных нужно использовать стейт.
2. Для сайд-эффектов нужно использовать useEffect. 

export default function Home() {

    const router = useRouter()
    const id = router.query.id;

    const [company, setCompany] = useState(null);

    useEffect(() => {
        fetch(`${url}/selectCompany`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                id: id
            })
        })
        .then(response => response.json())
        .then(result => setCompany(result));
    }, [id, setCompany])

    return company ? (
        <div className="container">

            <Head>
                <title>Company</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <TopBar />
            <GetCompanyPage company={company} />
            <Footer />

        </div>
    ) : null;
}
Ответ написан
9 комментариев
9 комментариев
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend React
Glob-com
от 100 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Смонтировать 20-минутное видео за примерно 50$ (Только Новичкам)
18 апр. 2024, в 22:09
4700 руб./за проект
Настройка сервера
18 апр. 2024, в 21:56
2000 руб./за проект
Помощь с водпресс
18 апр. 2024, в 21:00
150 руб./за проект
Ещё заказы