11---
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
44title : 如何更新資料
55nav_title : 更新資料
6- description : 學習如何在您的 Next.js 應用程式中更新資料。
6+ description : 了解如何在您的 Next.js 應用程式中更新資料。
77related :
88 title : API 參考
9- description : 透過閱讀 API 參考文件,進一步了解本頁提到的功能 。
9+ description : 透過閱讀 API 參考文件深入了解本頁提到的功能 。
1010 links :
1111 - app/api-reference/functions/revalidatePath
1212 - app/api-reference/functions/revalidateTag
@@ -17,17 +17,17 @@ related:
1717
1818## 伺服器函式
1919
20- 伺服器函式是一種在伺服器端執行的非同步函式。由於它們是透過客戶端發送網路請求來呼叫的,因此本質上是非同步的 。當作為 ` action ` 的一部分被呼叫時,它們也被稱為** 伺服器動作 (Server Actions)** 。
20+ 伺服器函式是在伺服器端執行的非同步函式。由於是透過客戶端發送網路請求來呼叫,伺服器函式本質上是非同步的 。當作為 ` action ` 的一部分被呼叫時,它們也被稱為** 伺服器動作 (Server Actions)** 。
2121
22- 依照慣例 ,` action ` 是一個傳遞給 ` startTransition ` 的非同步函式。在以下情況下,伺服器函式會自動被 ` startTransition ` 包裝:
22+ 按照慣例 ,` action ` 是傳遞給 ` startTransition ` 的非同步函式。在以下情況下,伺服器函式會自動被 ` startTransition ` 包裝:
2323
2424- 透過 ` action ` 屬性傳遞給 ` <form> `
2525- 透過 ` formAction ` 屬性傳遞給 ` <button> `
2626- 傳遞給 ` useActionState `
2727
2828## 建立伺服器函式
2929
30- 您可以使用 [ ` use server ` ] ( https://react.dev/reference/rsc/use-server ) 指示詞來定義伺服器函式。您可以將指示詞放在 ** 非同步** 函式的頂部,將該函式標記為伺服器函式;或者放在獨立檔案的頂部,將該檔案的所有匯出標記為伺服器函式 。
30+ 可以使用 [ ` use server ` ] ( https://react.dev/reference/rsc/use-server ) 指令來定義伺服器函式。您可以將指令放在 ** 非同步** 函式的頂部以標記該函式為伺服器函式,或放在獨立檔案的頂部以標記該檔案的所有導出 。
3131
3232``` ts filename="app/lib/actions.ts" switcher
3333export async function createPost(formData : FormData ) {
@@ -69,7 +69,7 @@ export async function deletePost(formData) {
6969
7070### 伺服器元件
7171
72- 在伺服器元件中,可以透過在函式主體頂部添加 ` "use server" ` 指示詞來內嵌伺服器函式 :
72+ 可以在伺服器元件中內聯伺服器函式,方法是將 ` "use server" ` 指令添加到函式主體的頂部 :
7373
7474``` tsx filename="app/page.tsx" switcher
7575export default function Page() {
@@ -97,7 +97,7 @@ export default function Page() {
9797
9898### 客戶端元件
9999
100- 無法在客戶端元件中定義伺服器函式。但是,您可以透過從頂部帶有 ` "use server" ` 指示詞的檔案中匯入它們,在客戶端元件中呼叫這些函式 :
100+ 無法在客戶端元件中定義伺服器函式。但是,您可以透過從頂部帶有 ` "use server" ` 指令的檔案中導入它們來在客戶端元件中呼叫 :
101101
102102``` ts filename="app/actions.ts" switcher
103103' use server'
@@ -133,16 +133,16 @@ export function Button() {
133133
134134## 呼叫伺服器函式
135135
136- 主要有兩種方式可以呼叫伺服器函式 :
136+ 有兩種主要方式可以呼叫伺服器函式 :
137137
1381381 . 在伺服器和客戶端元件中使用[ 表單] ( #forms )
1391392 . 在客戶端元件中使用[ 事件處理器] ( #event-handlers )
140140
141141### 表單
142142
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 ` 屬性呼叫伺服器函式。
144144
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 ) 提取資料 :
146146
147147``` tsx filename="app/ui/form.tsx" switcher
148148import { createPost } from ' @/app/actions'
@@ -196,7 +196,7 @@ export async function createPost(formData) {
196196}
197197```
198198
199- > ** 小知識:** 當傳遞給 ` action ` 屬性時,伺服器函式也被稱為 _ 伺服器動作 _ 。
199+ > ** 小知識:** 當傳遞給 ` action ` 屬性時,伺服器函式也被稱為* 伺服器動作 * 。
200200
201201### 事件處理器
202202
@@ -256,20 +256,20 @@ export default function LikeButton({ initialLikes }) {
256256
257257### 顯示處理中狀態
258258
259- 在執行伺服器函式時,您可以使用 React 的 [ ` useActionState ` ] ( https://react.dev/reference/react/useActionState ) 鉤子來顯示載入指示器。該鉤子會回傳一個 ` pending ` 布林值:
259+ 在執行伺服器函式時,您可以使用 React 的 [ ` useActionState ` ] ( https://react.dev/reference/react/useActionState ) 鉤子顯示載入指示器。該鉤子會返回一個 ` pending ` 布林值:
260260
261261``` tsx filename="app/ui/button.tsx" switcher
262262' use client'
263263
264- import { useActionState } from ' react'
264+ import { useActionState , startTransition } from ' react'
265265import { createPost } from ' @/app/actions'
266266import { LoadingSpinner } from ' @/app/ui/loading-spinner'
267267
268268export function Button() {
269269 const [state, action, pending] = useActionState (createPost , false )
270270
271271 return (
272- <button onClick = { async () => action ( )} >
272+ <button onClick = { () => startTransition ( action )} >
273273 { pending ? <LoadingSpinner /> : ' 建立文章' }
274274 </button >
275275 )
@@ -279,15 +279,15 @@ export function Button() {
279279``` jsx filename="app/ui/button.js" switcher
280280' use client'
281281
282- import { useActionState } from ' react'
282+ import { useActionState , startTransition } from ' react'
283283import { createPost } from ' @/app/actions'
284284import { LoadingSpinner } from ' @/app/ui/loading-spinner'
285285
286286export function Button () {
287287 const [state , action , pending ] = useActionState (createPost, false )
288288
289289 return (
290- < button onClick= {async () => action ( )}>
290+ < button onClick= {() => startTransition (action )}>
291291 {pending ? < LoadingSpinner / > : ' 建立文章' }
292292 < / button>
293293 )
@@ -323,7 +323,7 @@ export async function createPost(formData) {
323323
324324### 重新導向
325325
326- 您可能希望在執行更新後將使用者重新導向到其他頁面。可以在伺服器函式中呼叫 [ ` redirect ` ] ( /docs/app/api-reference/functions/redirect ) 來實現:
326+ 您可能希望在執行更新後將使用者重新導向到不同頁面。您可以在伺服器函式中呼叫 [ ` redirect ` ] ( /docs/app/api-reference/functions/redirect ) 來實現:
327327
328328``` ts filename="app/lib/actions.ts" switcher
329329' use server'
0 commit comments