Неверный ответ от getStaticProps с Next. js - PullRequest
0 голосов
/ 29 марта 2020

Я пытаюсь получить некоторые данные с локального сервера в соответствии с Next. js docs, но он отвечает следующей ошибкой:

FetchError: недействительно json тело ответа в http://localhost: 3000 / агентство / все причина: неожиданный токен <в JSON в позиции 0 </p>

Я пробовал те же функции из componentDidMount и из * Консоль 1032 * и оба работают, но как-то Next не может обработать данные в getStaticProps. Аналогичная ситуация произошла, когда я попробовал ax ios (он работал хорошо на componentDidMount, но не на getStaticProps, хотя на этот раз он ответил 404 на эту функцию, даже когда данные существовали).

Мой код такой следует:

import fetch from "node-fetch";


class Inmobiliarias extends React.Component {

    componentDidMount() {
        // This works
        async function getStuff() {
            const res = await fetch("http://localhost:3000/agency/all");
            const agencies = await res.json();
            console.log(agencies);
        }
        getStuff();
    }

    render() {
        return (
            // Component...
        );
    }
}


export async function getStaticProps() {
    // This doesn't work
    const res = await fetch("http://localhost:3000/agency/all");
    const agencies = await res.json();

    return { props: { agencies: agencies } };
}

export default Inmobiliarias;

Я, очевидно, не запускаю обе функции одновременно: когда я пытаюсь componentDidMount, я комментирую getStaticProps и наоборот. В чем может быть проблема?

Спасибо!


РЕДАКТИРОВАТЬ

Мне удалось решить проблему: случилось так, что у меня были оба backend и Node + Next работают в разных контейнерах Docker, и они не могут общаться друг с другом. Решением было изменить адрес localhost в функции fetch на IP-адрес внутреннего контейнера. Ответ пришел с этого поста: ECONNREFUSED nodeJS с express внутри docker контейнер .

1 Ответ

0 голосов
/ 29 марта 2020

Вы должны вернуть объект в getInitialProps, например:

import fetch from "node-fetch";


class Inmobiliarias extends React.Component {
    const { agencies } = this.props; 

    // use agencies
    console.log(agencies)

    render() {
        return (
            // Component...
        );
    }
}


export async function getStaticProps() {
    const agencies = 
      fetch("http://localhost:3000/agency/all")
        .then(res => res.json())
        .catch(error => console.log(erro))

    return { agencies };
}

export default Inmobiliarias;
...