Skip to content

Update translations #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 6, 2025
Merged

Update translations #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions apps/docs/content/zh-hans/docs/01-app/01-getting-started/02-project-structure.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,8 +203,6 @@ Next.js 对项目文件组织方式**不做强制要求**，但提供了多种
height="863"
/>

</AppOnly>

### 文件同置 (Colocation)

在 `app` 目录中，嵌套文件夹定义了路由结构。每个文件夹代表一个路由片段，对应 URL 路径中的相应片段。
Expand Down
44 changes: 22 additions & 22 deletions apps/docs/content/zh-hans/docs/01-app/01-getting-started/10-updating-data.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
source-updated-at: 2025-06-01T01:32:19.000Z
translation-updated-at: 2025-06-01T01:32:19.000Z
source-updated-at: 2025-06-03T15:30:49.000Z
translation-updated-at: 2025-06-05T23:37:56.407Z
title: 如何更新数据
nav_title: 更新数据
description: 了解如何在 Next.js 应用中更新数据。
nav_title: 数据更新
description: 学习如何在 Next.js 应用中更新数据。
related:
title: API 参考
description: 通过阅读 API 参考文档了解更多本页提到的功能特性。
Expand All @@ -13,21 +13,21 @@ related:
- app/api-reference/functions/redirect
---

你可以使用 React 的 [Server Functions](https://react.dev/reference/rsc/server-functions) 在 Next.js 中更新数据。本页将介绍如何[创建](#creating-server-functions)和[调用](#invoking-server-functions)服务端函数。
您可以使用 React 的 [服务端函数 (Server Functions)](https://react.dev/reference/rsc/server-functions) 在 Next.js 中更新数据。本页将介绍如何[创建](#creating-server-functions)和[调用](#invoking-server-functions)服务端函数。

## 服务端函数

服务端函数是在服务器端执行的异步函数。由于它们是通过客户端网络请求调用的，因此本质上是异步的。当作为 `action` 的一部分被调用时，它们也被称为**服务端操作 (Server Actions)**。
服务端函数是在服务器端执行的异步函数。由于它们是通过客户端发起的网络请求调用的，因此本质上是异步的。当作为 `action` 的一部分被调用时，它们也被称为**服务端操作 (Server Actions)**。

按照约定，`action` 是传递给 `startTransition` 的异步函数。在以下情况下，服务端函数会自动被 `startTransition` 包裹：
按照约定，`action` 是传递给 `startTransition` 的异步函数。服务端函数在以下情况下会自动被 `startTransition` 包裹：

- 通过 `action` 属性传递给 `<form>`
- 通过 `formAction` 属性传递给 `<button>`
- 传递给 `useActionState`

## 创建服务端函数

可以通过 [`use server`](https://react.dev/reference/rsc/use-server) 指令定义服务端函数。你可以将指令放在**异步**函数顶部来标记该函数为服务端函数，或者放在单独文件顶部来标记该文件的所有导出。
可以通过使用 [`use server`](https://react.dev/reference/rsc/use-server) 指令来定义服务端函数。您可以将该指令放在**异步**函数的顶部以将其标记为服务端函数，或者放在单独文件的顶部以标记该文件的所有导出。

```ts filename="app/lib/actions.ts" switcher
export async function createPost(formData: FormData) {
Expand Down Expand Up @@ -69,7 +69,7 @@ export async function deletePost(formData) {

### 服务端组件

通过将 `"use server"` 指令添加到函数体顶部，可以在服务端组件中内联定义服务端函数：
可以通过在函数体顶部添加 `"use server"` 指令，在服务端组件中内联定义服务端函数：

```tsx filename="app/page.tsx" switcher
export default function Page() {
Expand Down Expand Up @@ -97,7 +97,7 @@ export default function Page() {

### 客户端组件

无法在客户端组件中定义服务端函数。但可以通过从顶部带有 `"use server"` 指令的文件导入来调用它们：
无法在客户端组件中定义服务端函数。但您可以通过从顶部带有 `"use server"` 指令的文件导入它们，在客户端组件中调用这些函数：

```ts filename="app/actions.ts" switcher
'use server'
Expand Down Expand Up @@ -133,7 +133,7 @@ export function Button() {

## 调用服务端函数

主要有两种方式可以调用服务端函数：
有两种主要方式可以调用服务端函数：

1. 服务端和客户端组件中的[表单](#forms)
2. 客户端组件中的[事件处理程序](#event-handlers)
Expand All @@ -142,7 +142,7 @@ export function Button() {

React 扩展了 HTML [`<form>`](https://react.dev/reference/react-dom/components/form) 元素，允许通过 HTML `action` 属性调用服务端函数。

在表单中调用时，函数会自动接收 [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData/FormData) 对象。你可以使用原生 [`FormData` 方法](https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods)提取数据：
在表单中调用时，函数会自动接收 [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData/FormData) 对象。您可以使用原生 [`FormData` 方法](https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods)提取数据：

```tsx filename="app/ui/form.tsx" switcher
import { createPost } from '@/app/actions'
Expand Down Expand Up @@ -196,11 +196,11 @@ export async function createPost(formData) {
}
```

> **须知：** 当传递给 `action` 属性时，服务端函数也被称为*服务端操作 (Server Actions)*。
> **须知：** 当传递给 `action` 属性时，服务端函数也被称为_服务端操作 (Server Actions)_。

### 事件处理程序

可以在客户端组件中使用 `onClick` 等事件处理程序调用服务端函数。
您可以在客户端组件中使用 `onClick` 等事件处理程序调用服务端函数。

```tsx filename="app/like-button.tsx" switcher
'use client'
Expand Down Expand Up @@ -254,22 +254,22 @@ export default function LikeButton({ initialLikes }) {

## 示例

### 显示待处理状态
### 显示等待状态

在执行服务端函数时，可以使用 React 的 [`useActionState`](https://react.dev/reference/react/useActionState) 钩子显示加载指示器。该钩子会返回一个 `pending` 布尔值：
在执行服务端函数时，您可以使用 React 的 [`useActionState`](https://react.dev/reference/react/useActionState) 钩子显示加载指示器。该钩子会返回一个 `pending` 布尔值：

```tsx filename="app/ui/button.tsx" switcher
'use client'

import { useActionState } from 'react'
import { useActionState, startTransition } from 'react'
import { createPost } from '@/app/actions'
import { LoadingSpinner } from '@/app/ui/loading-spinner'

export function Button() {
const [state, action, pending] = useActionState(createPost, false)

return (
<button onClick={async () => action()}>
<button onClick={() => startTransition(action)}>
{pending ? <LoadingSpinner /> : '创建文章'}
</button>
)
Expand All @@ -279,15 +279,15 @@ export function Button() {
```jsx filename="app/ui/button.js" switcher
'use client'

import { useActionState } from 'react'
import { useActionState, startTransition } from 'react'
import { createPost } from '@/app/actions'
import { LoadingSpinner } from '@/app/ui/loading-spinner'

export function Button() {
const [state, action, pending] = useActionState(createPost, false)

return (
<button onClick={async () => action()}>
<button onClick={() => startTransition(action)}>
{pending ? <LoadingSpinner /> : '创建文章'}
</button>
)
Expand All @@ -296,7 +296,7 @@ export function Button() {

### 重新验证缓存

执行更新后，可以通过在服务端函数中调用 [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) 或 [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) 来重新验证 Next.js 缓存并显示更新后的数据：
执行更新后，您可以通过在服务端函数中调用 [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) 或 [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) 来重新验证 Next.js 缓存并显示更新后的数据：

```ts filename="app/lib/actions.ts" switcher
import { revalidatePath } from 'next/cache'
Expand All @@ -323,7 +323,7 @@ export async function createPost(formData) {

### 重定向

你可能希望在执行更新后将用户重定向到其他页面。可以通过在服务端函数中调用 [`redirect`](/docs/app/api-reference/functions/redirect) 实现：
您可能希望在执行更新后将用户重定向到其他页面。可以通过在服务端函数中调用 [`redirect`](/docs/app/api-reference/functions/redirect) 来实现：

```ts filename="app/lib/actions.ts" switcher
'use server'
Expand Down
Loading