什么时候获取数据，什么时候更新状态？

Question

我不知道是否有可接受的最佳做法。我有一个组件，它使用 axios 在 useEffect 中获取数据并根据响应更新状态 (setData)。响应returns一个对象数组，即：

[
  {"title" : "Foo", "value":1},
  {"title" : "Bar", "value": 2}
]

允许用户从列表中删除一个项目。当用户删除一个项目时，我使用 axios 发送一个 DELETE 请求，但我也像这样更新状态：

setData(data.filter(d => d.id !== item.id))

重新渲染组件并且项目消失了。我想知道这是否不应该通过更新状态来完成，而是使用 useEffect 来获取数据，并等待后端发送响应。

是否有性能方面的最佳方法？

Answer 1

这里唯一的问题是服务器错误。

因此拥有一个中间件或在成功时更新状态将确保组件拥有最新的数据。

// No middleware
axios.delete(url).then(() => setState(...));

// Middleware
axios.delete(url).then(() => updateStore(...));
// ... Component listening to store updates

根据经验，你不应该复制状态（在这种情况下你处理状态两次 - 一次你获取，一次在组件中），所以我强烈建议不要使用这种模式，尽管它提供了快一点 UI 反馈（当你乐观并且服务器很慢时使用它）。

// optimistic
setData(data.filter(d => d.id !== item.id))
axios.delete(url).catch(() => setState(prevStateBeforeError));

Answer 2

我假设，您只是根据删除请求的成功响应更新状态。但作为最佳实践，在创建请求后，您应该调用 fetch API 而不是更新状态，以确保您始终拥有更新的数据，如果请求失败，您还将处理错误情况.

什么时候获取数据，什么时候更新状态？

When to fetch data and when to update state?

reactjs

use-effect