在 Nextjs 中处理 getServerSideProps 错误的正确方法

Question

我正在尝试处理通过 getServerSideProps 出现的任何错误，我通过 if else 条件检查它，它工作正常，直到我有任何其他挂钩调用，如 useEffect。当我使用钩子 useEffect 时，它给出了以下错误 - 尽管根据钩子规则是正确的。

但它给出错误 错误：有条件地调用 React Hook“useEffect”。当我使用 useEffect hook 并执行 npm 运行 build.

时，必须在每个组件 render 中以完全相同的顺序调用 React Hooks

谁能帮我解决这个问题



function Test({ data }) {
    console.log(data)

    if (data?.err) {
         return (<Error statusCode={data.err} />)
     }

 useEffect(() => {
   //fetch any data or do something

    return () => {
      
    };
  }, []);
  

return(<div>Return Div</>)

}

export default Test


export const getServerSideProps = async (context) => {


  const { data } = await axios.get(`${baseUrl}HomePage/all`).catch(err => {
    const dataerr = { data: { err: `${JSON.stringify(err?.response?.status)}` } }

    return dataerr
  })

  console.log(data)
  return { props: { data } }

}

Answer 1

您在 Test 中使用了早期条件 return。将 useEffect（ 和所有其他挂钩）挂钩移动到任何功能组件 return 上方，这样它就是（它们是 ) 在每个渲染周期 无条件地 调用。

function Test({ data }) {
  console.log(data);

  useEffect(() => {
    //fetch any data or do something

    return () => {
      
    };
  }, []);

  if (data?.err) {
    return <Error statusCode={data.err} />'
  }

  return <div>Return Div</>;
}

在 Nextjs 中处理 getServerSideProps 错误的正确方法

Right way to handle error in getServerSideProps in Nextjs

reactjs

next.js

react-hooks

use-effect