Question

Nextjs getInitialProps query.id 未定义

2021-07-03

1070

reactjs next.js

我正在尝试从路由 http//localhost:3000/portfolios/helloworld 获取 id，所以 id 是 helloworld。但是我收到一个错误，提示 TypeError：无法解构“query”的属性“id”，因为它未定义。


const PortfolioDetail = ({ query }) => {
  const { id } = query;
  return <h1>I am Details Page with ID: {id}</h1>;
};

PortfolioDetail.getInitialProps = ({ query }) => {
  return { query };
};

export default PortfolioDetail;

我尝试对类组件执行相同的操作，但错误相同。

// class PortfolioDetail extends React.Component {
//   static getInitialProps({ query }) {
//     return { query };
//   }

//   render() {
//     const id = this.props.query.id;
//     return <h1>I am Detail Page with id : {id} </h1>;
//   }
// }

// export default PortfolioDetail;

这是我的项目结构，您可以在下图中看到

它只有效，我可以使用下面显示的 useRouter 获取我的 id。

import { useRouter } from 'next/router';
import React from 'react';

const PortfolioDetail = () => {
  const router = useRouter();
  const id = router.query.id 
  return <h1>I am Details Page with ID: {id}</h1>;
};

PortfolioDetail.getInitialProps = ({ query }) => {
  return { query };
};

export default PortfolioDetail;

我被困在这一点上，我真的想知道为什么它不起作用。

Answer 1

我明白了，你的 _app 中有一个错误：


import '../styles/index.scss';
import 'bootstrap/dist/css/bootstrap.min.css';

// Don't need to spread pageProps here
const MyApp = ({ Component, ...pageProps }) => {
  return <Component {...pageProps} />;
};

export default MyApp;

它应该是：

const MyApp = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

Answer 2

为什么不像下面的代码那样使用它

  export default function FirstPost({ id }) {
    console.log("-->", id);
    return (
      <>
        {id}sdlfdfdlkj
      </>
    );
  }

  FirstPost.getInitialProps = ({ query }) => {
    return { id: query?.id };
  };