Навигация внутри функции в реакции

Question

У меня есть кнопка удаления на странице '/ book'. При нажатии на эту кнопку, он должен удалить содержимое на сервере (это работает нормально). Но после удаления записей страница должна обновиться sh. Но этого не происходит.

<Button  onClick={(e) => { this.deleteRecord(e, k.id) }}>Delete</Button> 

Вот функция deleteRecord ():

deleteBook(e, id) {
    e.preventDefault();

    fetch(`url/${id}`, {
        method: 'DELETE',
    }).then(res => {
        return res.json()
    })
        .then(data => console.log(data))

        .catch(error => console.log('ERROR from delete component'))
    this.props.history.push('/book'); //to navigate
 }

Answer 1

fetch(`url/${id}`, {
    method: 'DELETE',
}).then(res => {
    return res.json()
})
    .then(data => console.log(data))
    .then(() => this.props.history.push('/book'); //to navigate)
    .catch(error => console.log('ERROR from delete component'))

Вы должны поместить событие маршрутизатора в .then, потому что две функции выполняются одновременно без порядка.

Алгоритм, который вы используете: DELETE> Routing. Без этого у вас нет контроля над тем, что происходит внутри вашего блока

Answer 2

Для refre sh страницы, лично я использую это:

window.location.reload(false);