Как перерисовать компонент React при перенаправлении

Question

Я создаю клон SoundCloud, и когда я удаляю песню со страницы песни, я хочу перенаправить ее на компонент индекса песни (страница / Discover).

Я могу успешно перенаправить туда после удаления, но страница индекса остается пустой, пока я не обновлюсь, после чего песни будут выбраны. Я попытался с помощью ComponentDidUpdate на странице индекса снова извлечь fetchSongs, когда 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() все равно должен работать, давайте немного его реорганизовать

Так что в компоненте Discover попробуйте что-то вроде:

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

this.props.songsOrNameOfReducerKey просто относится к избыточному состоянию, в котором содержится обновленный список песен - доступный в качестве опоры в вашем компоненте. Мы сравниваем обновленный список с нашим предыдущим списком, и если есть разница, мы запускаем вашего создателя действия. Убедитесь, что вы подключили redux к своему компоненту через mapStateToProps(), чтобы получить это значение состояния. Замените songsOrNameOfReducerKey ключом, который вы определили.

Когда вы удаляете песню из вашего списка, она должна дать компоненту Discover новые реквизиты, таким образом вызывая componentDidUpdate()