You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/flushSync.md
+16-16Lines changed: 16 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -134,34 +134,34 @@ export default function PrintApp() {
134
134
135
135
---
136
136
137
-
## Troubleshooting {/*troubleshooting*/}
137
+
## 故障排除 {/*troubleshooting*/}
138
138
139
-
### I'm getting an error: "flushSync was called from inside a lifecycle method" {/*im-getting-an-error-flushsync-was-called-from-inside-a-lifecycle-method*/}
139
+
### 我收到了一个错误:"flushSync was called from inside a lifecycle method" {/*im-getting-an-error-flushsync-was-called-from-inside-a-lifecycle-method*/}
140
140
141
141
142
-
React cannot`flushSync` in the middle of a render. If you do, it will noop and warn:
142
+
React 不能在渲染中调用`flushSync`。如果你这样做,它将不执行任何操作并发出警告:
143
143
144
144
<ConsoleBlocklevel="error">
145
145
146
-
Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
For example, calling`flushSync`in an Effect will noop and warn:
156
+
例如,在 Effect 中调用`flushSync`将不执行任何操作并发出警告:
157
157
158
158
```js
159
159
import { useEffect } from'react';
160
160
import { flushSync } from'react-dom';
161
161
162
162
functionMyComponent() {
163
163
useEffect(() => {
164
-
// 🚩 Wrong: calling flushSync inside an effect
164
+
// 🚩 错误:在 Effect 内部调用 flushSync
165
165
flushSync(() => {
166
166
setSomething(newValue);
167
167
});
@@ -171,23 +171,23 @@ function MyComponent() {
171
171
}
172
172
```
173
173
174
-
To fix this, you usually want to move the `flushSync`call to an event:
174
+
要修复此问题,通常需要将 `flushSync`调用移至一个事件处理函数:
175
175
176
176
```js
177
177
functionhandleClick() {
178
-
// ✅ Correct: flushSync in event handlers is safe
178
+
// ✅ 正确: 在事件处理函数中使用 flushSync 是安全的
179
179
flushSync(() => {
180
180
setSomething(newValue);
181
181
});
182
182
}
183
183
```
184
184
185
185
186
-
If it's difficult to move to an event, you can defer `flushSync` in a microtask:
186
+
如果很难将其移至事件处理函数中,你可以通过微任务来延迟 `flushSync`:
187
187
188
188
```js {3,7}
189
189
useEffect(() => {
190
-
// ✅ Correct: defer flushSync to a microtask
190
+
// ✅ 正确: 将 flushSync 延迟到微任务中
191
191
queueMicrotask(() => {
192
192
flushSync(() => {
193
193
setSomething(newValue);
@@ -196,10 +196,10 @@ useEffect(() => {
196
196
}, []);
197
197
```
198
198
199
-
This will allow the current render to finish and schedule another syncronous render to flush the updates.
199
+
这将允许当前渲染完成,并调度另一次同步渲染来刷新更新。
200
200
201
201
<Pitfall>
202
202
203
-
`flushSync`can significantly hurt performance, but this particular pattern is even worse for performance. Exhaust all other options before calling `flushSync`in a microtask as an escape hatch.
0 commit comments