Nextjs在重新加载页面时获取数据

JavaScript React.js

西里MandyEva

2020-03-24

在React中,我们useEffect在重新加载页面时使用来获取数据

useEffect(() => {
  let ignore = false
  const fetchingData = async () => {
    const res = await fetch(<your_path>)
    const data = await res.json()
    if (!ignore) setData(data)
  }; 
  fetchingData()
  return () => { ignore = true }
}, [])

但是如何在Next.js中执行此操作?getInitialProps重新加载页面时不会触发提取

第3562篇《Nextjs在重新加载页面时获取数据》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
小卤蛋前端 2020.03.24

Next.js通常使用HTTP请求加载数据的情况下,getInitialProps您可以将其用作道具:

const App = props => (
  <Layout>
  {props.data}
    ...
  </Layout>
);

App.getInitialProps = async function() {
  const res = await fetch(<your_path>)
  const data = await res.json()
  return {
   data
  }
};

export default App;

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android