Задать вопрос
@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, следом значение.

Спасибо.
  • Вопрос задан
  • 113 просмотров
Комментировать
Подписаться 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 комментариев
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Ведущий React Native разработчик
Студия 15
от 200 000 до 250 000 ₽
React Native Developer
Wanted. • Санкт-Петербург
До 300 000 ₽
React Native developer (+Node.js)
CTRL+ • Москва
от 250 000 до 320 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка сайта под ключ на CMS Bitrix или Wordpress по готову дизайн
22 нояб. 2024, в 14:05
100000 руб./за проект
Написание статей в нужном стиле ( интерьер, дизайн спальни )
22 нояб. 2024, в 13:52
2000 руб./за проект
Необходимо доработать расширение для Google Chrome
22 нояб. 2024, в 13:51
5000 руб./за проект
Ещё заказы