Блог

Главная - Вопросы по программированию - Получение реквизитов как неопределенных в компоненте, возвращаемом из getStaticProps

Получение реквизитов как неопределенных в компоненте, возвращаемом из getStaticProps

#javascript #reactjs #next.js

#javascript #reactjs #next.js

Вопрос:

Я вернул ответ json из getStaticProps, и консоль зарегистрировала его в getStaticProps, чтобы проверить правильность ответа json. Итак, выборка работает нормально, и я получаю правильный ответ от API.

 import Layout from '../components/layout';
import fetch from 'isomorphic-unfetch';
const Index = ({data}) => {
    console.log(data)
    return (
        <Layout>
            <div>
                <h1>Welcome to Next Application</h1>
                <h3>Users List</h3>
                {data ? 
                data.map((item, i) => {
                   return (
                   <li key={i}>{item.name}</li>
                   )
               }):
                <span>Loading...</span>
               }
                   
               
            </div>
        </Layout>
    );
}
export const getStaticProps = async () => {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users`);
    const data = await response.json();
    console.log(data);
    return {
        props:{
            data
        } 
    }
}
export default Index;

Получение данных как неопределенных в компоненте Index.
Чего мне не хватает?

Мой вывод — https://ibb.co/Ns9143C Github — https://github.com/ho-dor/next-poc

Комментарии:

1. Все выглядит нормально, и я просто вставляю ваш код поверх этого в codesandbox , и это работает как шарм 🙂

2. Пожалуйста, посмотрите на мой вывод — ibb.co/Ns9143C

3. Я вижу, но, как я уже сказал, в этом коде нет ничего плохого, если что-то не так, этого здесь нет. Можете ли вы отправить свой проект на Github или что-то в этом роде, чтобы мы могли его проверить?

4. Репозиторий Github — github.com/ho-dor/next-poc

Ответ №1:

Проблема в вашем пользовательском файле приложения, если вы удалите свою пользовательскую оболочку приложения, ваша проблема решится, но если вы хотите сохранить пользовательскую оболочку приложения, просто обновите свой _app.js следующим образом:

 import App from 'next/app';

const MyApp = ({ Component, props }) => {
    return (
        <div className="MyApp">
            <p>_app.js file</p>
            <Component {...props} />
        </div>
    );
};

MyApp.getInitialProps = async (appContext) => {
    // calls page's `getInitialProps` and fills `appProps.pageProps`
    const appProps = await App.getInitialProps(appContext);

    return { ...appProps };
};

export default App;

Для получения дополнительной информации проверьте здесь: Пользовательское приложение — NextJS

Ответ №2:

getStaticProps (Статическая генерация): выборка данных во время сборки.

Возможно, вы могли бы попробовать перестроить свое приложение, чтобы посмотреть, работает ли оно.

Ответ №3:

Вы используете пользовательский компонент _app в своем исходном коде. Если вы используете пользовательский компонент _app, вам нужно проверить, есть ли у компонентов статические компоненты, и запустить это вручную. Это будет сделано в самом пользовательском компоненте приложения.

Если вы его не используете, то вы не столкнетесь с какой-либо проблемой.

Вы можете следовать этому подходу, который я использовал для getInitialProps в моем пользовательском _app здесь