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:37:56.407Z
44title : 如何更新数据
5- nav_title : 更新数据
6- description : 了解如何在 Next.js 应用中更新数据。
5+ nav_title : 数据更新
6+ description : 学习如何在 Next.js 应用中更新数据。
77related :
88 title : API 参考
99 description : 通过阅读 API 参考文档了解更多本页提到的功能特性。
@@ -13,21 +13,21 @@ related:
1313 - app/api-reference/functions/redirect
1414---
1515
16- 你可以使用 React 的 [ Server Functions] ( https://react.dev/reference/rsc/server-functions ) 在 Next.js 中更新数据。本页将介绍如何[ 创建] ( #creating-server-functions ) 和[ 调用] ( #invoking-server-functions ) 服务端函数。
16+ 您可以使用 React 的 [ 服务端函数 ( Server Functions) ] ( https://react.dev/reference/rsc/server-functions ) 在 Next.js 中更新数据。本页将介绍如何[ 创建] ( #creating-server-functions ) 和[ 调用] ( #invoking-server-functions ) 服务端函数。
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,7 +133,7 @@ export function Button() {
133133
134134## 调用服务端函数
135135
136- 主要有两种方式可以调用服务端函数 :
136+ 有两种主要方式可以调用服务端函数 :
137137
1381381 . 服务端和客户端组件中的[ 表单] ( #forms )
1391392 . 客户端组件中的[ 事件处理程序] ( #event-handlers )
@@ -142,7 +142,7 @@ export function Button() {
142142
143143React 扩展了 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,11 +196,11 @@ export async function createPost(formData) {
196196}
197197```
198198
199- > ** 须知:** 当传递给 ` action ` 属性时,服务端函数也被称为 * 服务端操作 (Server Actions)* 。
199+ > ** 须知:** 当传递给 ` action ` 属性时,服务端函数也被称为_服务端操作 (Server Actions)_ 。
200200
201201### 事件处理程序
202202
203- 可以在客户端组件中使用 ` onClick ` 等事件处理程序调用服务端函数。
203+ 您可以在客户端组件中使用 ` onClick ` 等事件处理程序调用服务端函数。
204204
205205``` tsx filename="app/like-button.tsx" switcher
206206' use client'
@@ -254,22 +254,22 @@ export default function LikeButton({ initialLikes }) {
254254
255255## 示例
256256
257- ### 显示待处理状态
257+ ### 显示等待状态
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 )
@@ -296,7 +296,7 @@ export function Button() {
296296
297297### 重新验证缓存
298298
299- 执行更新后,可以通过在服务端函数中调用 [ ` revalidatePath ` ] ( /docs/app/api-reference/functions/revalidatePath ) 或 [ ` revalidateTag ` ] ( /docs/app/api-reference/functions/revalidateTag ) 来重新验证 Next.js 缓存并显示更新后的数据:
299+ 执行更新后,您可以通过在服务端函数中调用 [ ` revalidatePath ` ] ( /docs/app/api-reference/functions/revalidatePath ) 或 [ ` revalidateTag ` ] ( /docs/app/api-reference/functions/revalidateTag ) 来重新验证 Next.js 缓存并显示更新后的数据:
300300
301301``` ts filename="app/lib/actions.ts" switcher
302302import { revalidatePath } from ' next/cache'
@@ -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