时间戳

首页 > 解决方案 > React Router goBack 函数必须执行两次

javascript - React Router goBack 函数必须执行两次

问题描述

我开始学习 React 路由器，但在使用 goBack 函数时遇到了一些问题，该函数位于 React 路由器的历史属性中。

我有一个简单的路线，我在其中呈现一个虚拟帖子，形成 JsonPlaceHolder API，并制作一个返回按钮，该按钮执行此功能。

   returnToForwardPageHandler = () =>{
    this.props.history.goBack(); 
}

现在帖子是动态加载的，具体取决于给定的 ID。

 componentDidMount () {
    if(this.props.match.params.id){
        if ( !this.state.loadedPost || (this.state.loadedPost && this.state.loadedPost.id !== this.props.id) ) {
            axios.get( 'https://jsonplaceholder.typicode.com/posts/' + this.props.match.params.id)
                .then( response => {
                    // console.log(response);
                    this.setState( { loadedPost: response.data 
                } );
                } );
            }
        }
    }

但根据 id 的给出方式，我确实会得到不同的结果。

在给定帖子的 id 所在的组件中

  postSelectedHandler = (id) => {
    //this.setState({selectedPostId: id});
    this.props.history.push('/' + id)
}

如果我手动设置 id 的状态，它工作正常。但是如果我使用this.props.history.push('/' + id)，我必须点击两次按钮（执行returnToForwardPageHandler函数），结果不应该是一样的，我错过了什么？

标签： javascriptreactjsreact-router

解决方案

我希望这有帮助。如果没有，请提供有关您的路线的信息。

postSelectedHandler = (id) => {
    //this.setState({selectedPostId: id});
    this.props.history.push(`/${id}`)
}

推荐阅读