社区首页 >问答首页 >如何在Nextjs中使用链接获取数据

问如何在Nextjs中使用链接获取数据
EN

Stack Overflow用户

提问于 2020-03-09 09:54:51

回答 1查看 1.1K关注 0票数 0

我的数据存储在蒙戈地图集中。我可以获取数据( post )，但是当我单击post时，它没有提供ID的数据，我已经创建了一个页面/post页面。由于下面的代码在postlist.tsx中，我只能查看帖子的ID，并且只能通过其url将id传递到下一页。我也希望能够查看与该特定ID相关的帖子的标题和正文：

这是我的blogs.tsx

    interface PostState{
        posts: Post[];
    }

    export default class PostList extends React.Component <{},PostState> {
            state = {
                posts: []
            };

            componentDidMount = () => {
                this.getBlogPost();
            };

            getBlogPost = () => {

                axios
                    .get('/api')
                    .then(({data}) => {
                        const reverseData = new Array;
                        for (let datetime = data.length - 1; datetime >= 0; datetime--) {
                            reverseData.push(data[datetime]);
                        }
                        this.setState({posts: reverseData})
                    })
                    .catch((error) => {
                        alert('Error: there was an error processing your request')
                    })
            }

            displayBlogPost = (posts : Post[]) => {
                const currentDateTime = new Date();
                if (!posts.length) 
                    return null;

                return posts.map((post, index) => (
                    <div key={index}>
                        <Card>
                        <Title> 

                            <Link href={`/post?id=${post._id}`} as= . 
       {`/post/${post._id}`}></Title>
                        {/* <p>{post.date}</p>
                        <p>{post.name}</p> */}

                        <FullName>{`${post.name} | 
       ${dateToString(currentDateTime)}`}</FullName>
                        <Line />
                        <Question >{post.body}</Question>
                        </Card>
                    </div>
                ));
            }

            render() {
                return (
                    <div>
                        <Container>
                        <Headers/>
                        <div className="blog">
                            {this.displayBlogPost(this.state.posts)}
                        </div>                   
                        </Container>
                    </div>

                );
            }

    }

reactjs

mongodb

typescript

next.js

回答 1

Stack Overflow用户

发布于 2020-03-10 00:58:58

首先，您应该创建Post 路由

页面/post/index.js

import React from 'react'

class Post extends React.Component {
  static async getInitialProps({ query }) {
    return { query };
  }

  render() {
    return <div>id: {this.props.query.id}</div>
  }
}

export default Post

然后创建页面/post/id.js

import Post from './index'
export default Post

现在，当您打开localhost:port/post/22或localhost:port/post?id=22时，它应该显示数字22。

若要链接到另一页中的帖子，可以创建以下链接：

<Link href={`/post?id=${id}`} as={`/post/${id}`}>
  <a>{title}</a>
</Link>

如果这仍然不起作用，那么请向我们展示代码(在github上)。

如果它有效，那么现在您可以将id传递到post页面，因此只需要获取post。您可以在getInitialProps中这样做。

class Post extends React.Component {
  static async getInitialProps({query}) {
    const post = await axios.get(url, { // make sure the url is full url, no relative urls
      params: {
        id: query.id
      }
    })
    return { post: post.data }
  }

  render() {
    return (
      <pre>
        post:{' '}
        {JSON.stringify(this.props.post, undefined, 2)}
      </pre>
    )
  }
}