HistoryART
@HistoryART
Надзиратель

При первичном рендеринге, роутер возвращает 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, следом значение.

Спасибо.
  • Вопрос задан
  • 44 просмотра
Пригласить эксперта
Ответы на вопрос 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;
}
Ответ написан
Ваш ответ на вопрос

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

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