如何在重定向时重新渲染 React 组件

Question

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

我能够在删除后成功重定向到那里，但索引页面显示为空，直到我刷新，然后获取歌曲。当 history.location 不同时，我尝试在索引页面上使用 ComponentDidUpdate 再次 fetchSongs，但没有成功。

//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() 应该还是可以的，让我们稍微重构一下

所以在 Discover Component 中，尝试类似：

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

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

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