我是靠谱客的博主 直率康乃馨，这篇文章主要介绍React Hook中useState更新延迟问题方法一: 去掉useEffect的第二个参数方法二: 将改变函数移入useEffect并将第二个参数设置为state方法三: 如果不在意视图实时渲染 采用Ref代替useState或者全局变量，现在分享给大家，希望可以做个参考。
方法一: 去掉useEffect的第二个参数
例如以下代码 错误实例
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
-
const[zoom, setZoom] = useState(
0);
-
useEffect(() = >{
-
document.getElementById(
'workspace-content').addEventListener(
'mousewheel', scrollFunc);
-
},[]);
-
function scrollFunc(e) {
-
setZoom(zoom +
5)
-
}
会出现zoom永远等于 0+5, 而不是所谓的5, 10 ,15 为什么会这样呢? 因为useEffect执行时，会创建一个闭包，在每次监听到mousewheel运行时 闭包内部保存了zoom的初始化值 每次调用的时候都是取的初始化值0 所有会一直为0+5
怎么解决呢?
解决方案: 去掉useEffect中的空数组即可
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
-
const[zoom, setZoom] = useState(
0);
-
useEffect(() = >{
-
document.getElementById(
'workspace-content').addEventListener(
'mousewheel', scrollFunc);
-
return () = >
document.getElementById(
'workspace-content').removeEventListener(
"mousewheel", scrollFunc);
// 记得解绑事件
-
});
-
function scrollFunc(e) {
-
setZoom(zoom +
5)
-
}
方法二: 将改变函数移入useEffect并将第二个参数设置为state
依旧用上面的例子
解决方法: 正确示例
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
-
useEffect(() = >{
-
document.getElementById(
'workspace-content').addEventListener(
'mousewheel', scrollFunc);
-
return () = >
document.getElementById(
'workspace-content').removeEventListener(
"mousewheel", scrollFunc);
-
function scrollFunc(e) {
-
setZoom(zoom +
5) e.preventDefault()
-
}
-
},[zoom]);
方法三: 如果不在意视图实时渲染 采用Ref代替useState或者全局变量
例如下面的代码 错误示例
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
-
const [currentIndex, setCurrentIndex] = useState(
0)
-
const handleLeft =
() => {
-
setCurrentIndex(currentIndex+
1)
-
console.log(currentIndex)
-
}
初始化currentIndex为0 每次执行handleLeft函 数是让currentIndex加1, 之后立即获取currentIndex的值发现 第一次执行currentIndex = 0
第二次执行currentIndex = 1 每次都跟实际情况差一个 查阅资料发现useState必须要执行完react整个生命周期才会获取最新值
解决方案: 用useRef代替
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
-
const currentIndexRef = useRef(
0);
// 不能用useState 会导致数据更新不及时
-
const handleLeft =
() => {
-
currentIndexRef.current +=
1
-
console.log(currentIndexRef.current)
-
}
最后
以上就是直率康乃馨最近收集整理的关于React Hook中useState更新延迟问题方法一: 去掉useEffect的第二个参数方法二: 将改变函数移入useEffect并将第二个参数设置为state方法三: 如果不在意视图实时渲染 采用Ref代替useState或者全局变量的全部内容，更多相关React内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复