Question

在构建我的React JS应用程序时遇到一些问题。所以，我有一个博客，上面有帖子，每个帖子都有详细的视图。从详细视图中，我需要两个按钮，一个按钮将用户重定向到下一个帖子，另一个按钮将用户重定向到上一个帖子。我尝试了几种想法来实现这一目标，但实际上没有一个可行。还有一个要说的细节是这些帖子不是一个接一个的，我的意思是其中一个帖子的ID为12，而下一个帖子的ID为19。

这是我代码的一部分：

export default class DetailView extends React.Component {

constructor(props) {
    super(props);
    this.state = {
      item: [],
      isLoaded: false,
    }
}

componentDidMount() {

    const articleID = this.props.match.params.articleID;
    fetch(`http://localhost:8000/api/${articleID}`)
        .then(res => res.json())
        .then(json => {
        this.setState({
            isLoaded: true,
            item: json,
        })
        });
}

render() {

    return(
        <div className="detailView font">
            blah blah, here the important part comes
                        <Row className="padding">
                            <Col sm={12} md={12} lg={6} xl={6}>
                                <Button variant="outline-secondary"><Link to={''}>Previous project</Link></Button>
                            </Col>
                            <Col sm={12} md={12} lg={6} xl={6} className="text-right">
                                <Button variant="outline-secondary"><Link to={''}>Next project</Link></Button>
                            </Col>  
                        </Row>
                </Container>
            </div>
        </div>
    )
}

}

Answer 1

如果您可以控制服务器，则可以添加一个端点，例如/posts/:id/next，然后服务器将确定下一个帖子（使用发布日期），而不是需要知道下一个帖子ID是什么的组件。，ID，实际上是最适合您博客设计的内容。

如何访问ReactJS中的下一篇博客文章

1 个答案: