React 状态更新中的函数式更新

在 React 中，状态管理是一个重要的主题。特别是在基于异步操作（如 API 请求）更新状态时，确保状态的一致性至关重要。本篇博客将讨论在更新状态时常见的问题，以及如何使用函数式更新来避免这些问题。

问题描述

在进行异步操作后，我们可能会遇到更新状态时使用旧状态值的问题。例如，以下代码尝试在 API 请求完成后更新状态：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
-  const searchTimelineTask = (fusionTagId) => {
-        let tagId : number =  null
-        if () {
-            tagId = fusionTagId
-        }
-        axios.post('/checkit/api/tqs/query_timeline_task', {
-            fusionTagId: tagId,
-            pageNo: pagination.current,
-            pageSize: pagination.pageSize,
-        }).then(res => {
-            console.log(res);
-            setData(res.data.data)
-            setPagination({...pagination, total: res.data.totalCount })
-        }).catch(err => {
-            console.error(err);
-        })
-    }
+  setPagination({ ...pagination, total: res.data.totalCount });

这里的 pagination 是一个外部变量。如果在状态更新之前，pagination 的值已经发生了变化，则可能导致更新的状态不准确。

使用函数式更新

为了解决上述问题，我们可以使用 React 提供的函数式更新方法。函数式更新允许我们在更新状态时始终获取到最新的状态值。正确的写法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
-  const searchTimelineTask = (fusionTagId) => {
-        let tagId : number =  null
-        if () {
-            tagId = fusionTagId
-        }
-        axios.post('/checkit/api/tqs/query_timeline_task', {
-            fusionTagId: tagId,
-            pageNo: pagination.current,
-            pageSize: pagination.pageSize,
-        }).then(res => {
-            console.log(res);
-            setData(res.data.data)
-            setPagination({...pagination, total: res.data.totalCount })
-        }).catch(err => {
-            console.error(err);
-        })
-    }
+  setPagination((prevPagination) => {
+      return { ...prevPagination, total: res.data.totalCount };
+  });

为什么要使用函数式更新？

  1. 确保状态一致性：通过接受一个函数，您可以使用当前的最新状态来计算新的状态，而不必依赖于外部变量。
  2. 避免竞态条件：在高并发或异步场景中，如果多个状态更新可能会同时发生，函数式更新能够确保每次都是基于最新的状态进行更新。

总结

在进行状态更新时，尤其是在依赖于先前状态的情况下，建议使用函数式更新。这种方式不仅可以确保状态的正确性，也能提高应用的稳定性。随着复杂度的增加，尤其是在处理异步数据时，始终保持状态的一致性是非常重要的。使用这种方法将有助于您在开发过程中避免潜在的问题。