如何在Nextjs中使用链接获取数据
如何在Nextjs中使用链接获取数据
提问于 2020-03-09 17:54:51
我的数据存储在蒙戈地图集中。我可以获取数据( 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>
);
}
}回答 1
Stack Overflow用户
发布于 2020-03-10 08: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>
)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60605962
复制相关文章
相似问题
腾讯云开发者
