Как получить сведения об API из папки компонента с помощью Next. js?

Question

У меня есть многоразовый компонент, который я создал в папке компонентов, где у меня есть все данные от пользователя, который входит в систему, что является разделом заголовка.

Я пытаюсь использовать getInitialProps используя выборку с isomorphic-unfetch.

static async getInitialProps(ctx) {
    const UserdetailsRespone = await fetch("my API url");
    const UserdetailsJson = await UserdetailsRespone.json();
    return { UserDetails: UserdetailsJson.root[0] };
 }

В методе рендеринга, когда я регистрирую this.props.UserDetails, я получаю undefined. Это та же выборка API, что и та, что я делаю в папке страниц, откуда я могу получить ответ API. Но я не могу получить ответ в папке компонентов.

Может ли кто-нибудь помочь мне решить эту проблему? Заранее спасибо.

Answer 1

getInitialProps работает на стороне сервера и клиента. Так что будьте осторожны при его использовании. Я обычно использую typeof Window === 'undefined', чтобы проверить, вызывается ли getInitialProps на стороне сервера или нет.

Если у вас есть дочерний компонент, который вам нужно вызывать каждый раз, когда он монтируется, почему бы не придерживаться componentDidMount?

async componentDidMount() {
    const userDetailsResponse = await fetch("my API url");
    const userDetailsJson = await userDetailsResponse.json();
    this.setState({userDetails: userDetailsJson})
}

Тогда вы можете получить доступ к свойствам из состояния вместо props.

Answer 2

Если вы используете getInitialProps в дочернем компоненте, это не сработает. Он работает только при экспорте каждой страницы по умолчанию. Из официальных документов

Редактировать: Как упоминал Узаир Ашраф, использование fetch - это способ go для получения данных в компонентах. Вы также можете посмотреть swr .