Невозможно правильно сделать выборку с помощью Next. js - PullRequest
Новая
       24

Невозможно правильно сделать выборку с помощью Next. js

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

У меня проблемы с выполнением выборки в соответствии с документацией, доступной на сайте Next. js. Я пытался утешить реквизит, который я не могу показать. Я не имею опыта работы с Next, пытаясь отразить его в React, но, к сожалению, он не работает. Как я могу сделать выборку, используя getStaticProps? У меня есть учебник, который использует getInitialProps для более старой версии Next. js, но я пытаюсь следовать их новой документации. Вот стартовый код, который у меня есть: 

import React, { Component } from 'react';
// import fetch from 'node-fetch'

class Index extends Component {
    state = {}

    getStaticProps = async () => {
        // Call an external API endpoint to get posts.
        console.log('fetching data')
        const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
        const posts = await res.json()


        return {
            props: {
                posts,
            },
        }

    }
    render() {
        console.log(this.props)
        return (
            <div>
                <h1>Our Index Page!!</h1>
            </div>
        );
    }
}


export default Index

1 Ответ

1 голос
/ 15 марта 2020

Из документов:

Если вы экспортируете из страницы асинхронную c функцию, называемую getStaticProps, Next. js будет предварительно визуализировать эту страницу во время сборки, используя реквизиты возвращается getStaticProps.

. Это означает, что вместо getStaticProps внутри компонента, export это так: 

import React, { Component } from 'react';
// import fetch from 'node-fetch'

class Index extends Component {
    state = {}

    render() {
        console.log(this.props)
        return (
            <div>
                <h1>Our Index Page!!</h1>
            </div>
        );
    }
}

export const getStaticProps = async () => {
    // Call an external API endpoint to get posts.
    console.log('fetching data')
    const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    const posts = await res.json()
    return {
        props: {
            posts,
        },
    }
}

export default Index
...