Reactjs axios调用后，如何更新前端？[我有两种方法]

我有一大堆待办事项。当我删除其中一个时，我也通过delete调用成功地将其从数据库中删除。但是，我不知道如何更新前端。第一种方法是通过删除相关的todo来更改状态

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
    });
}

另一种方法是，发出新的axios GET请求以从数据库获取所有TODO。（这将是axios请求中的axios请求）

---

因此，哪种方法更好？

最好的方法是第二种方法，即再次调用get请求。因此，无论数据库发生了什么更改，UI都将是db中数据的精确副本，而不是手动更改（在本例中删除）UI中的列表。但是，在这种情况下，UI更新的api响应会延迟。

为了避免延迟，也可以同时执行这两种操作。首先通过直接更改状态来删除该项，然后通过使用

get

Yes调用get方法来确保状态与数据库相对应，但是如果api响应足够快，这将是一个不必要的对象比较和从ui中删除对象，如果api中的数据和当前处于状态的数据之间确实有变化，那么恢复该项，这种复杂程度的管理将非常繁忙。我看不到复杂性。您只需设置状态（嗯，两次），然后让React完成其余的操作。如果状态发生变化，则项目也将发生变化。如果您想提高一点效率，可以将服务器的响应与当前状态进行比较，并仅在它们不相同时进行设置，这仍然很简单
我同意在大多数情况下可能不需要这样做，因为响应确实不应该花那么长的时间。当你从ui/state中删除一个对象时，如果你不得不处理一个案例，那么api确实有这个值，那么复杂性就来了，然后，您将不得不处理这样一种情况：您必须将项目恢复到ui/状态，最终用户将不知道该项目是如何恢复的！将发生的情况要么是swift-item消失，要么是项目重新出现，要么就是没有可见的更改（如果服务器的响应足够快）。不理想-正确，但与仅通过将状态设置为服务器的响应值来更新状态的替代方案没有太大区别（或任何不同）。如果该项目再次出现，则表示删除过程未成功，这是需要以任何方式处理的结果。

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.
    });
}