1
1
---
2
- source-updated-at : 2025-06-01T01:32:19 .000Z
3
- translation-updated-at : 2025-06-01T01:32:19.000Z
2
+ source-updated-at : 2025-06-03T15:30:49 .000Z
3
+ translation-updated-at : 2025-06-05T23:40:14.407Z
4
4
title : 如何更新資料
5
5
nav_title : 更新資料
6
- description : 學習如何在您的 Next.js 應用程式中更新資料。
6
+ description : 了解如何在您的 Next.js 應用程式中更新資料。
7
7
related :
8
8
title : API 參考
9
- description : 透過閱讀 API 參考文件,進一步了解本頁提到的功能 。
9
+ description : 透過閱讀 API 參考文件深入了解本頁提到的功能 。
10
10
links :
11
11
- app/api-reference/functions/revalidatePath
12
12
- app/api-reference/functions/revalidateTag
@@ -17,17 +17,17 @@ related:
17
17
18
18
## 伺服器函式
19
19
20
- 伺服器函式是一種在伺服器端執行的非同步函式。由於它們是透過客戶端發送網路請求來呼叫的,因此本質上是非同步的 。當作為 ` action ` 的一部分被呼叫時,它們也被稱為** 伺服器動作 (Server Actions)** 。
20
+ 伺服器函式是在伺服器端執行的非同步函式。由於是透過客戶端發送網路請求來呼叫,伺服器函式本質上是非同步的 。當作為 ` action ` 的一部分被呼叫時,它們也被稱為** 伺服器動作 (Server Actions)** 。
21
21
22
- 依照慣例 ,` action ` 是一個傳遞給 ` startTransition ` 的非同步函式。在以下情況下,伺服器函式會自動被 ` startTransition ` 包裝:
22
+ 按照慣例 ,` action ` 是傳遞給 ` startTransition ` 的非同步函式。在以下情況下,伺服器函式會自動被 ` startTransition ` 包裝:
23
23
24
24
- 透過 ` action ` 屬性傳遞給 ` <form> `
25
25
- 透過 ` formAction ` 屬性傳遞給 ` <button> `
26
26
- 傳遞給 ` useActionState `
27
27
28
28
## 建立伺服器函式
29
29
30
- 您可以使用 [ ` use server ` ] ( https://react.dev/reference/rsc/use-server ) 指示詞來定義伺服器函式。您可以將指示詞放在 ** 非同步** 函式的頂部,將該函式標記為伺服器函式;或者放在獨立檔案的頂部,將該檔案的所有匯出標記為伺服器函式 。
30
+ 可以使用 [ ` use server ` ] ( https://react.dev/reference/rsc/use-server ) 指令來定義伺服器函式。您可以將指令放在 ** 非同步** 函式的頂部以標記該函式為伺服器函式,或放在獨立檔案的頂部以標記該檔案的所有導出 。
31
31
32
32
``` ts filename="app/lib/actions.ts" switcher
33
33
export async function createPost(formData : FormData ) {
@@ -69,7 +69,7 @@ export async function deletePost(formData) {
69
69
70
70
### 伺服器元件
71
71
72
- 在伺服器元件中,可以透過在函式主體頂部添加 ` "use server" ` 指示詞來內嵌伺服器函式 :
72
+ 可以在伺服器元件中內聯伺服器函式,方法是將 ` "use server" ` 指令添加到函式主體的頂部 :
73
73
74
74
``` tsx filename="app/page.tsx" switcher
75
75
export default function Page() {
@@ -97,7 +97,7 @@ export default function Page() {
97
97
98
98
### 客戶端元件
99
99
100
- 無法在客戶端元件中定義伺服器函式。但是,您可以透過從頂部帶有 ` "use server" ` 指示詞的檔案中匯入它們,在客戶端元件中呼叫這些函式 :
100
+ 無法在客戶端元件中定義伺服器函式。但是,您可以透過從頂部帶有 ` "use server" ` 指令的檔案中導入它們來在客戶端元件中呼叫 :
101
101
102
102
``` ts filename="app/actions.ts" switcher
103
103
' use server'
@@ -133,16 +133,16 @@ export function Button() {
133
133
134
134
## 呼叫伺服器函式
135
135
136
- 主要有兩種方式可以呼叫伺服器函式 :
136
+ 有兩種主要方式可以呼叫伺服器函式 :
137
137
138
138
1 . 在伺服器和客戶端元件中使用[ 表單] ( #forms )
139
139
2 . 在客戶端元件中使用[ 事件處理器] ( #event-handlers )
140
140
141
141
### 表單
142
142
143
- React 擴展了 HTML [ ` <form> ` ] ( https://react.dev/reference/react-dom/components/form ) 元素,允許透過 HTML ` action ` 屬性呼叫伺服器函式。
143
+ React 擴展了 HTML [ ` <form> ` ] ( https://react.dev/reference/react-dom/components/form ) 元素,允許使用 HTML ` action ` 屬性呼叫伺服器函式。
144
144
145
- 當在表單中呼叫時,函式會自動接收 [ ` FormData ` ] ( https://developer.mozilla.org/docs/Web/API/FormData/FormData ) 物件。您可以使用原生的 [ ` FormData ` 方法] ( https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods ) 來提取資料 :
145
+ 當在表單中呼叫時,函式會自動接收 [ ` FormData ` ] ( https://developer.mozilla.org/docs/Web/API/FormData/FormData ) 物件。您可以使用原生的 [ ` FormData ` 方法] ( https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods ) 提取資料 :
146
146
147
147
``` tsx filename="app/ui/form.tsx" switcher
148
148
import { createPost } from ' @/app/actions'
@@ -196,7 +196,7 @@ export async function createPost(formData) {
196
196
}
197
197
```
198
198
199
- > ** 小知識:** 當傳遞給 ` action ` 屬性時,伺服器函式也被稱為 _ 伺服器動作 _ 。
199
+ > ** 小知識:** 當傳遞給 ` action ` 屬性時,伺服器函式也被稱為* 伺服器動作 * 。
200
200
201
201
### 事件處理器
202
202
@@ -256,20 +256,20 @@ export default function LikeButton({ initialLikes }) {
256
256
257
257
### 顯示處理中狀態
258
258
259
- 在執行伺服器函式時,您可以使用 React 的 [ ` useActionState ` ] ( https://react.dev/reference/react/useActionState ) 鉤子來顯示載入指示器。該鉤子會回傳一個 ` pending ` 布林值:
259
+ 在執行伺服器函式時,您可以使用 React 的 [ ` useActionState ` ] ( https://react.dev/reference/react/useActionState ) 鉤子顯示載入指示器。該鉤子會返回一個 ` pending ` 布林值:
260
260
261
261
``` tsx filename="app/ui/button.tsx" switcher
262
262
' use client'
263
263
264
- import { useActionState } from ' react'
264
+ import { useActionState , startTransition } from ' react'
265
265
import { createPost } from ' @/app/actions'
266
266
import { LoadingSpinner } from ' @/app/ui/loading-spinner'
267
267
268
268
export function Button() {
269
269
const [state, action, pending] = useActionState (createPost , false )
270
270
271
271
return (
272
- <button onClick = { async () => action ( )} >
272
+ <button onClick = { () => startTransition ( action )} >
273
273
{ pending ? <LoadingSpinner /> : ' 建立文章' }
274
274
</button >
275
275
)
@@ -279,15 +279,15 @@ export function Button() {
279
279
``` jsx filename="app/ui/button.js" switcher
280
280
' use client'
281
281
282
- import { useActionState } from ' react'
282
+ import { useActionState , startTransition } from ' react'
283
283
import { createPost } from ' @/app/actions'
284
284
import { LoadingSpinner } from ' @/app/ui/loading-spinner'
285
285
286
286
export function Button () {
287
287
const [state , action , pending ] = useActionState (createPost, false )
288
288
289
289
return (
290
- < button onClick= {async () => action ( )}>
290
+ < button onClick= {() => startTransition (action )}>
291
291
{pending ? < LoadingSpinner / > : ' 建立文章' }
292
292
< / button>
293
293
)
@@ -323,7 +323,7 @@ export async function createPost(formData) {
323
323
324
324
### 重新導向
325
325
326
- 您可能希望在執行更新後將使用者重新導向到其他頁面。可以在伺服器函式中呼叫 [ ` redirect ` ] ( /docs/app/api-reference/functions/redirect ) 來實現:
326
+ 您可能希望在執行更新後將使用者重新導向到不同頁面。您可以在伺服器函式中呼叫 [ ` redirect ` ] ( /docs/app/api-reference/functions/redirect ) 來實現:
327
327
328
328
``` ts filename="app/lib/actions.ts" switcher
329
329
' use server'
0 commit comments