После того, как Axios Call, как я должен обновить интерфейс?[У меня есть 2 способа]

Question

У меня есть массив задач.Когда я удаляю один из них, я удаляю его также из базы данных с помощью вызова DELETE.Однако я не уверен, как обновить интерфейс.Первый способ - это изменение состояния путем удаления связанных дел.

onDelete(todo) {
    axios.delete('api/todos/' + todo.id).then(res => {
        var array = [...this.state.todos]; // make a separate copy of the array
        var index = array.indexOf(todo)
        array.splice(index, 1);
        this.setState({todos: array}); // other state elemenets other than todos will not be affected
    });
}

Другой способ - создание нового GET-запроса axios для получения всех задач из базы данных.(это будет запрос axios внутри запроса axios)

onDelete(todo) {
    axios.delete('api/todos/' + todo.id).then(res => {
        // make an axios get request on api/todos
        // then, set state with data in response.
    });
}

Следовательно, какой подход лучше?

Answer 1

Наилучшим подходом будет второй способ - еще раз вызвать запрос на получение.Таким образом, независимо от того, что претерпела база данных изменений, пользовательский интерфейс будет точной копией данных из базы данных вместо того, чтобы вручную изменять (в этом случае удаляя) список из пользовательского интерфейса.Однако в этом случае будет задержка ответа API для обновления пользовательского интерфейса.