Как передать данные, извлеченные в _app. js, компоненту - PullRequest
Новая
       9

Как передать данные, извлеченные в _app. js, компоненту

0 голосов
/ 30 апреля 2020

В моем следующем js проекте у меня есть компонент Layout, который требует вызова API. Вместо того, чтобы вызывать вызовы API на каждой странице (./ pages / *), я бы хотел поместить logi c в некоторое глобальное пространство. Я немного исследовал, и похоже, что переопределение _app. js - это путь к go, указанный в следующей js документации (https://nextjs.org/docs/advanced-features/custom-app).

Я положил код, как показано ниже. Но, похоже, это не работает.

. / Pages / _app. js

function MyApp({ Component, appProps, results }) {

  return (
    <Layout {...results}>
      <Component {...appProps} />
    </Layout>
  )
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext)
  const results = await getResults()  //api call

  return { appProps, results }
}

. / Components / Layout. js

const Layout = ({ children, results }) => {

  return (
    <React.Fragment>
      <Header/>
      <div className='row col-md-8 offset-md-2'>
        {JSON.stringify(results)} //results is nothing here
        <div className='col-md-9'>
          {children}
        </div>
      </div>
    </React.Fragment>
  )
}

. / pages / index. js

...
return (
    <>
      {head()}
      <Layout>
        <div className='row col-md-12'>
          {showContents()}
        </div>
      </Layout>
    </>
  )

Я уверен, что упускаю некоторые очевидные вещи. Любая помощь будет оценена.

1 Ответ

0 голосов
/ 30 апреля 2020

Если вы не хотите, чтобы эта страница возвращала похожие результаты каждый раз, вы должны перенести свой вызов API на клиентскую сторону. Далее. JS отошел от getInitialProps в пользу getStaticProps (извлечение данных c), getStaticPaths (предварительный рендеринг набора страниц c страниц) и getServerSideProps (это, вероятно, ближе всего к getInitialProps, выбирая данные на на стороне сервера). Подробнее о следующем. js извлечение данных здесь: https://nextjs.org/docs/basic-features/data-fetching

Теперь ответим на ваш вопрос на основе предоставленного вами кода 

// index.js
<Layout> <- you're not passing any props here.

. результаты выглядят так: 

// index.js
function Page({ results }){
  return <Layout results={results}>Hello</Layout>
}

С примером на стороне клиента вы можете сделать что-то вроде 

import { useState } from 'react'

function useCats(){
  const [cats, setCats] = useState()
  useEffect(() => {
    fetch('https://test.api/cats')
      .then(response => response.json())
      .then(_cats => setCats(_cats));
  }, [])

  return cats
}

// then in another component

function CatsList(){
  const cats = useCats();
  if(!cats){
    return <p>Loading</p>
  }

  return <div>
    {cats.map(cat => <p key={cat.id}>Cat: {cat.name}</p>)}
  </div>
}
...