react,nextjs

Question

nextjs的页面在服务端请求有getServerSideProps，getStaticProps这些方法
请问在子组件页面有没有提供服务端请求的方法呀
useEffect或componentWillMount都不管用

Answer 1

有用望采纳
是的，在 Next.js 中的子组件页面也可以进行服务端请求。您可以使用 getInitialProps 方法。 getInitialProps 是 Next.js 提供的一个静态方法，它允许您在组件中进行服务端请求。

示例

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const SubComponent = (props) => {
  const [data, setData] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios.get(`https://api.example.com/data`)
      setData(result.data)
    }

    fetchData()
  }, [])

  return (
    <div>
      {data.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
    </div>
  )
}

SubComponent.getInitialProps = async (context) => {
  const result = await axios.get(`https://api.example.com/data`)
  return {
    data: result.data
  }
}

export default SubComponent