Question

我正在创建SoundCloud的克隆，当我从歌曲页面删除歌曲时，我想重定向到歌曲索引组件（/ discover页面）。

删除后我能够成功地将其重定向到该目录，但是索引页面显示为空，直到刷新为止，然后就提取了歌曲。我尝试过在index.page上使用ComponentDidUpdate在history.location不同但又没有成功的情况下再次获取歌曲。

//Song Delete Component
handleDelete() {
    this.props.removeSong(this.props.songId)
    this.props.history.push("/discover");
}

//Song Index Component
componentDidUpdate(prevProps) { 
    if (this.props.history.location.pathname !== 
        prevProps.location.pathname) {
        this.props.fetchSongs(); 
    }
}

Answer 1

当您重定向到新组件/路由时，该组件将重新安装到屏幕上。您应该改用componentDidMount()；

发现组件：

componentDidMount() { 
     this.props.fetchSongs(); 
}

编辑---

刚刚了解到您的第二页实际上是模式页面，并且您执行action-creator并在那里重定向。在这种情况下，Discover组件实际上可能尚未从屏幕上卸载，因此为什么componentDidMount()无法执行。但是componentDidUpdate(）仍然可以正常工作，让我们对其进行重构

因此，在“发现组件”中，尝试类似以下操作：

componentDidUpdate(prevProps){
    if(this.props.songsOrNameOfReducerKey !== prevProps.songsOrNameOfReducerKey){
        this.props.fetchSongs()
    }
}

this.props.songsOrNameOfReducerKey仅指保存更新后的歌曲列表的redux状态-在组件中可以作为道具使用。我们将更新后的列表与之前的列表进行比较，如果有差异，我们将执行您的操作创建者。确保通过redux将mapStateToProps()连接到组件，以获取此状态值。将songsOrNameOfReducerKey替换为您定义的密钥。

从列表中删除歌曲时，它应该为Discover组件提供新道具，从而触发componentDidUpdate()

重定向后如何重新渲染React组件

1 个答案:

发现组件：

编辑---