Блог

Главная - Вопросы по программированию - ошибка типа react storefront: Не удается прочитать свойство ‘_includeAppData’ неопределенного

ошибка типа react storefront: Не удается прочитать свойство ‘_includeAppData’ неопределенного

#reactjs #storefront

Вопрос:

Я использую react storefront уже пару недель. Хотя я понимал концепции высокого уровня, я действительно застрял в реализации API с использованием fulfillAPIRequest, fetchFromAPI, AppData и PageData и т. Д.

Мой текущий код выглядит следующим образом:

Файл: _app.js:

 export default function MyApp({ Component, pageProps }) {
  useJssStyles()
  const classes = useStyles()
  const [appData] = useAppStore(pageProps || {})

  return (
    <PWA errorReporter={reportError}>
      <Head>
        {/* <meta
          key="viewport"
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
        /> */}
      </Head>
      <SessionProvider url="/api/session">
        <MuiThemeProvider theme={theme}>
          <CssBaseline/>
          <Header className={classes.header} />
          <HeaderBanner />
          <Delivery />
          <Search />
           <main className={classes.main}>
            <Component {...pageProps} />
          </main>
          <Footer />
        </MuiThemeProvider>
      </SessionProvider>
    </PWA>
  )
}

MyApp.getInitialProps = async function({ Component, ctx }) {
  let pageProps = {}

  if (Component.getInitialProps) {
    console.info("Executing _app.js: Invoking Component.getInitialProps...")
    pageProps = await Component.getInitialProps(ctx)
  }

  return { pageProps }
}

файл: pages/index.js => страница точки входа

 import React from 'react'
import { fetchFromAPI, createLazyProps } from 'react-storefront/props'
import NearbyShops from '../components/shops/nearby-shops.js'


export default function Index(lazyProps) {

  return  (
    <NearbyShops />
  )
}

Index.getInitialProps = createLazyProps(fetchFromAPI, { timeout: 50 })

Я реализовал api для страницы index.js, в фодере /pages/api/index.js, следующим образом…

 import fulfillApiRequest from 'react-storefront/props/fulfillAPIRequest'

function getPageData () {
  console.info("Executing 'getPageData' in /api/index.js...")
  return Promise.resolve({})
}

export default async function Index (params, req, res) {

  console.info("Executing '/pages/api/index.js' ...")
  const result = await fulfillApiRequest(req, {
    appData: () => getAppData(),
    pageData: () => getPageData()
  })
  return result
}

When I run this app, I get the following error in the GUI:
enter image description here

In the console, I get the error stack trace as follows…
enter image description here

If I don’t use the fulfillAPIRequest and its related api methods, I am able to show the rendered page, normally. But now I want to integrate the API. The official documentation is not that helpful in this regard.

Please help.

Метки: