From 898de48722799f881ee19c273cfb523a82651e9b Mon Sep 17 00:00:00 2001
From: zhangke200377 <zhangke200377@outlook.com>
Date: Fri, 27 Oct 2023 23:13:29 +0800
Subject: [PATCH 01/11] docs(cn): translate
 reference/react-dom/hooks/useFormState into Chinese

---
 .../reference/react-dom/hooks/useFormState.md | 94 ++++++++++---------
 1 file changed, 49 insertions(+), 45 deletions(-)

diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
index 53c73ae387..a37b4b035e 100644
--- a/src/content/reference/react-dom/hooks/useFormState.md
+++ b/src/content/reference/react-dom/hooks/useFormState.md
@@ -5,13 +5,13 @@ canary: true
 
 <Canary>
 
-The `useFormState` Hook is currently only available in React's canary and experimental channels. Learn more about [release channels here](/community/versioning-policy#all-release-channels). In addition, you need to use a framework that supports [React Server Components](/reference/react/use-client) to get the full benefit of `useFormState`.
+`useFormState` Hook 当前仅在 React canary 与 experimental 渠道中可用。 请点此了解更多关于 [React 发布渠道](/community/versioning-policy#all-release-channels)的信息。此外，你需要一款完全支持 [React 服务器组件](/reference/react/use-client) 特性的框架才可以使用 `useFormState` 的所有特性。
 
 </Canary>
 
 <Intro>
 
-`useFormState` is a Hook that allows you to update state based on the result of a form action.
+`useFormState` 是一个可以让你根据某个 form action 的结果更新 State 的 Hook。
 
 ```js
 const [state, formAction] = useFormState(fn, initialState);
@@ -23,13 +23,13 @@ const [state, formAction] = useFormState(fn, initialState);
 
 ---
 
-## Reference {/*reference*/}
+## 参考 {/*reference*/}
 
 ### `useFormState(action, initialState)` {/*useformstate*/}
 
 {/* TODO T164397693: link to actions documentation once it exists */}
 
-Call `useFormState` at the top level of your component to create component state that is updated [when a form action is invoked](/reference/react-dom/components/form). You pass `useFormState` an existing form action function as well as an initial state, and it returns a new action that you use in your form, along with the latest form state. The latest form state is also passed to the function that you provided.
+在组件的顶层调用 `useFormState` 即可创建一个随 [form action 被调用](/reference/react-dom/components/form) 而更新的State。 在调用 `useFormState` 时在参数中传入现有的 form action 函数以及一个初始状态，它就会返回一个新的 action 函数和一个 form state 可供在 form 中使用。这个新的 form state 也会作为参数传入你提供的 form action 函数。
 
 ```js
 import { useFormState } from "react-dom";
@@ -43,44 +43,44 @@ function StatefulForm({}) {
   return (
     <form>
       {state}
-      <button formAction={formAction}>Increment</button>
+      <button formAction={formAction}>+1</button>
     </form>
   )
 }
 ```
 
-The form state is the value returned by the action when the form was last submitted. If the form has not yet been submitted, it is the initial state that you pass.
+Form state 是一个只在表单被提交触发 action 后才会被更新的值。如果该表单没有被提交，该值会保持你传入的初始值不变。
 
-If used with a server action, `useFormState` allows the server's response from submitting the form to be shown even before hydration has completed.
+如果配合服务器操作一起使用， `useFormState` 允许与表单交互的服务器的返回值在 hydration 完成前显示。
 
-[See more examples below.](#usage)
+[在下面查看更多用法](#usage)。
 
-#### Parameters {/*parameters*/}
+#### 参数 {/*parameters*/}
 
-* `fn`: The function to be called when the form is submitted or button pressed. When the function is called, it will receive the previous state of the form (initially the `initialState` that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that a form action normally receives.
-* `initialState`: The value you want the state to be initially. It can be any serializable value. This argument is ignored after the action is first invoked.
+* `fn`: 当按钮被按下或者表单被提交时触发的函数。当函数被调用时，该函数会接收到表单的上一个 state（初始值是你传入的 `initialState` 参数，在其他情况下是上一次执行完该函数的结果）作为函数的第一个参数，第二个参数为普通 form action 接到的参数。
+* `initialState`: state 的初始值。任何可序列化的值都可接收。当 action 被调用一次后该参数会被忽略。
 
 {/* TODO T164397693: link to serializable values docs once it exists */}
 
-#### Returns {/*returns*/}
+#### 返回值 {/*returns*/}
 
-`useFormState` returns an array with exactly two values:
+`useFormState` 返回一个包含两个值的数组：
 
-1. The current state. During the first render, it will match the `initialState` you have passed. After the action is invoked, it will match the value returned by the action.
-2. A new action that you can pass as the `action` prop to your `form` component or `formAction` prop to any `button` component within the form.
+1. 当前的 state。第一次渲染期间，该值为你传入的 `initialState` 参数值。在 action 被调用后该值会变为 action 的返回值。
+2. 一个新的 action 函数用于在你的 `form` 组件的 `action` 参数或表单中任意一个 `button` 组件的 `formAction` 参数中传递。
 
-#### Caveats {/*caveats*/}
+#### 注意 {/*caveats*/}
 
-* When used with a framework that supports React Server Components, `useFormState` lets you make forms interactive before JavaScript has executed on the client. When used without Server Components, it is equivalent to component local state.
-* The function passed to `useFormState` receives an extra argument, the previous or initial state, as its first argument. This makes its signature different than if it were used directly as a form action without using `useFormState`.
+* 在支持 React 服务器组件的框架中使用该功能时，`useFormState` 允许表单在服务器渲染阶段时获得部分交互性。当不使用服务器组件时，它的特性与本地 state 相同。
+* 与直接通过 form action 调用的函数不同，传入 `useFormState` 的函数被调用时，会多传入一个代表 state 的上一个值或初始值的参数作为该函数的第一个参数。
 
 ---
 
-## Usage {/*usage*/}
+## 用法 {/*usage*/}
 
-### Using information returned by a form action {/*using-information-returned-by-a-form-action*/}
+### 使用某个 form action 返回的信息 {/*using-information-returned-by-a-form-action*/}
 
-Call `useFormState` at the top level of your component to access the return value of an action from the last time a form was submitted.
+在组件的顶层调用 `useFormState` 来获取上一次表单被提交时触发的 action 的返回值。
 
 ```js [[1, 5, "state"], [2, 5, "formAction"], [3, 5, "action"], [4, 5, "null"], [2, 8, "formAction"]]
 import { useFormState } from 'react-dom';
@@ -97,14 +97,14 @@ function MyComponent() {
 }
 ```
 
-`useFormState` returns an array with exactly two items:
+`useFormState` 返回一个包含两个值的数组：
 
-1. The <CodeStep step={1}>current state</CodeStep> of the form, which is initially set to the <CodeStep step={4}>initial state</CodeStep> you provided, and after the form is submitted is set to the return value of the <CodeStep step={3}>action</CodeStep> you provided.
-2. A <CodeStep step={2}>new action</CodeStep> that you pass to `<form>` as its `action` prop.
+1. 该 form 的 <CodeStep step={1}>当前 state</CodeStep>，初始值为你提供的 <CodeStep step={4}>初始 state</CodeStep>，当表单被提交后则改为你传入的 <CodeStep step={3}>action</CodeStep> 的返回值。
+2. 传入 `<form>` 标签的 `action` 属性的<CodeStep step={2}>新 action</CodeStep>。
 
-When the form is submitted, the <CodeStep step={3}>action</CodeStep> function that you provided will be called. Its return value will become the new <CodeStep step={1}>current state</CodeStep> of the form.
+表单被提交后，你传入的 <CodeStep step={3}>action</CodeStep> 函数会被执行。返回值将会作为该 form 新的 <CodeStep step={1}>当前 state</CodeStep>。
 
-The <CodeStep step={3}>action</CodeStep> that you provide will also receive a new first argument, namely the <CodeStep step={1}>current state</CodeStep> of the form. The first time the form is submitted, this will be the <CodeStep step={4}>initial state</CodeStep> you provided, while with subsequent submissions, it will be the return value from the last time the action was called. The rest of the arguments are the same as if `useFormState` had not been used
+你传入的 <CodeStep step={3}>action</CodeStep> 接受到的第一个参数将会变为该 form 的 <CodeStep step={1}>当前 state</CodeStep>。当表单第一次被提交时将会传入你提供的 <CodeStep step={4}>初始 state</CodeStep>，之后都将传入上一次调用 <CodeStep step={3}>action</CodeStep> 函数的返回值。余下参数与未使用 `useFormState` 前接受的参数别无二致<sup><a href="#note1">[1]</a></sup>。
 
 ```js [[3, 1, "action"], [1, 1, "currentState"]]
 function action(currentState, formData) {
@@ -113,11 +113,11 @@ function action(currentState, formData) {
 }
 ```
 
-<Recipes titleText="Display information after submitting a form" titleId="display-information-after-submitting-a-form">
+<Recipes titleText="提交表单后展示信息" titleId="display-information-after-submitting-a-form">
 
-#### Display form errors {/*display-form-errors*/}
+#### 展示表单错误 {/*display-form-errors*/}
 
-To display messages such as an error message or toast that's returned by a server action, wrap the action in a call to `useFormState`.
+想要展示诸如错误信息或服务器操作返回的 toast 等信息，将 action 包裹进 `useFormState` 即可。
 
 <Sandpack>
 
@@ -132,7 +132,7 @@ function AddToCartForm({itemID, itemTitle}) {
     <form action={formAction}>
       <h2>{itemTitle}</h2>
       <input type="hidden" name="itemID" value={itemID} />
-      <button type="submit">Add to Cart</button>
+      <button type="submit">加入购物车</button>
       {message}
     </form>
   );
@@ -141,8 +141,8 @@ function AddToCartForm({itemID, itemTitle}) {
 export default function App() {
   return (
     <>
-      <AddToCartForm itemID="1" itemTitle="JavaScript: The Definitive Guide" />
-      <AddToCartForm itemID="2" itemTitle="JavaScript: The Good Parts" />
+      <AddToCartForm itemID="1" itemTitle="JavaScript：权威指南" />
+      <AddToCartForm itemID="2" itemTitle="JavaScript：优点荟萃" />
     </>
   )
 }
@@ -154,9 +154,9 @@ export default function App() {
 export async function addToCart(prevState, queryData) {
   const itemID = queryData.get('itemID');
   if (itemID === "1") {
-    return "Added to cart";
+    return "已加入购物车";
   } else {
-    return "Couldn't add to cart: the item is sold out.";
+    return "无法加入购物车：商品已售罄";
   }
 }
 ```
@@ -188,9 +188,9 @@ form button {
 
 <Solution />
 
-#### Display structured information after submitting a form {/*display-structured-information-after-submitting-a-form*/}
+#### 提交表单后展示结构性数据 {/*display-structured-information-after-submitting-a-form*/}
 
-The return value from a server action can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information.
+服务器操作的返回值可以为任意可序列化的值。例如，可以返回一个实例，该实例携带一个 boolean 类型的属性表示操作是否成功，同时附带错误信息或更新消息。
 
 <Sandpack>
 
@@ -205,15 +205,15 @@ function AddToCartForm({itemID, itemTitle}) {
     <form action={formAction}>
       <h2>{itemTitle}</h2>
       <input type="hidden" name="itemID" value={itemID} />
-      <button type="submit">Add to Cart</button>
+      <button type="submit">加入购物车</button>
       {formState?.success &&
         <div className="toast">
-          Added to cart! Your cart now has {formState.cartSize} items.
+          成功加入购物车！当前购物车中共有 {formState.cartSize} 件商品。
         </div>
       }
       {formState?.success === false &&
         <div className="error">
-          Failed to add to cart: {formState.message}
+          加入购物车失败：{formState.message}
         </div>
       }
     </form>
@@ -223,8 +223,8 @@ function AddToCartForm({itemID, itemTitle}) {
 export default function App() {
   return (
     <>
-      <AddToCartForm itemID="1" itemTitle="JavaScript: The Definitive Guide" />
-      <AddToCartForm itemID="2" itemTitle="JavaScript: The Good Parts" />
+      <AddToCartForm itemID="1" itemTitle="JavaScript：权威指南" />
+      <AddToCartForm itemID="2" itemTitle="JavaScript：优点荟萃" />
     </>
   )
 }
@@ -243,7 +243,7 @@ export async function addToCart(prevState, queryData) {
   } else {
     return {
       success: false,
-      message: "The item is sold out.",
+      message: "商品已售罄",
     };
   }
 }
@@ -278,14 +278,18 @@ form button {
 
 </Recipes>
 
-## Troubleshooting {/*troubleshooting*/}
+## 疑难解答 {/*troubleshooting*/}
 
-### My action can no longer read the submitted form data {/*my-action-can-no-longer-read-the-submitted-form-data*/}
+### 我的 action 无法再获取提交的 form data 了 {/*my-action-can-no-longer-read-the-submitted-form-data*/}
 
-When you wrap an action with `useFormState`, it gets an extra argument *as its first argument*. The submitted form data is therefore its *second* argument instead of its first as it would usually be. The new first argument that gets added is the current state of the form.
+当你使用 `useFormState` 包裹你的 action 时，*第一个参数*变为了 form 的当前 state，提交的表单数据被顺移到了*第二个*参数中，与直接使用 form action 是不同的。
 
 ```js
 function action(currentState, formData) {
   // ...
 }
 ```
+
+**译注：**
+
+<a name="note1"></a> [1] 这里的意思是原来的第一个参数被顺移为第二个参数，第二个参数被顺移为第三个参数，以此类推

From 3a836a5fca08f9b6347511cfa224d424fe9ebb16 Mon Sep 17 00:00:00 2001
From: zhangke200377 <zhangke200377@outlook.com>
Date: Mon, 30 Oct 2023 11:33:00 +0800
Subject: [PATCH 02/11] useFormState.md: fix copywriting isues

---
 .../reference/react-dom/hooks/useFormState.md    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
index a37b4b035e..c81e8fbf06 100644
--- a/src/content/reference/react-dom/hooks/useFormState.md
+++ b/src/content/reference/react-dom/hooks/useFormState.md
@@ -5,13 +5,13 @@ canary: true
 
 <Canary>
 
-`useFormState` Hook 当前仅在 React canary 与 experimental 渠道中可用。 请点此了解更多关于 [React 发布渠道](/community/versioning-policy#all-release-channels)的信息。此外，你需要一款完全支持 [React 服务器组件](/reference/react/use-client) 特性的框架才可以使用 `useFormState` 的所有特性。
+`useFormState` Hook 当前仅在 React canary 与 experimental 渠道中可用。请点此了解更多关于 [React 发布渠道](/community/versioning-policy#all-release-channels) 的信息。此外，你需要一款完全支持 [React 服务器组件](/reference/react/use-client) 特性的框架才可以使用 `useFormState` 的所有特性。
 
 </Canary>
 
 <Intro>
 
-`useFormState` 是一个可以让你根据某个 form action 的结果更新 State 的 Hook。
+`useFormState` 是一个可以让你根据某个 form action 的结果更新 state 的 Hook。
 
 ```js
 const [state, formAction] = useFormState(fn, initialState);
@@ -29,7 +29,7 @@ const [state, formAction] = useFormState(fn, initialState);
 
 {/* TODO T164397693: link to actions documentation once it exists */}
 
-在组件的顶层调用 `useFormState` 即可创建一个随 [form action 被调用](/reference/react-dom/components/form) 而更新的State。 在调用 `useFormState` 时在参数中传入现有的 form action 函数以及一个初始状态，它就会返回一个新的 action 函数和一个 form state 可供在 form 中使用。这个新的 form state 也会作为参数传入你提供的 form action 函数。
+在组件的顶层调用 `useFormState` 即可创建一个随 [form action 被调用](/reference/react-dom/components/form) 而更新的 state。在调用 `useFormState` 时在参数中传入现有的 form action 函数以及一个初始状态，它就会返回一个新的 action 函数和一个 form state 可供在 form 中使用。这个新的 form state 也会作为参数传入你提供的 form action 函数。
 
 ```js
 import { useFormState } from "react-dom";
@@ -49,16 +49,16 @@ function StatefulForm({}) {
 }
 ```
 
-Form state 是一个只在表单被提交触发 action 后才会被更新的值。如果该表单没有被提交，该值会保持你传入的初始值不变。
+form state 是一个只在表单被提交触发 action 后才会被更新的值。如果该表单没有被提交，该值会保持你传入的初始值不变。
 
-如果配合服务器操作一起使用， `useFormState` 允许与表单交互的服务器的返回值在 hydration 完成前显示。
+如果配合服务器操作一起使用，`useFormState` 允许与表单交互的服务器的返回值在 hydration 完成前显示。
 
 [在下面查看更多用法](#usage)。
 
 #### 参数 {/*parameters*/}
 
-* `fn`: 当按钮被按下或者表单被提交时触发的函数。当函数被调用时，该函数会接收到表单的上一个 state（初始值是你传入的 `initialState` 参数，在其他情况下是上一次执行完该函数的结果）作为函数的第一个参数，第二个参数为普通 form action 接到的参数。
-* `initialState`: state 的初始值。任何可序列化的值都可接收。当 action 被调用一次后该参数会被忽略。
+* `fn`：当按钮被按下或者表单被提交时触发的函数。当函数被调用时，该函数会接收到表单的上一个 state（初始值是你传入的 `initialState` 参数，在其他情况下是上一次执行完该函数的结果）作为函数的第一个参数，余下参数为普通 form action 接到的参数。
+* `initialState`：state 的初始值。任何可序列化的值都可接收。当 action 被调用一次后该参数会被忽略。
 
 {/* TODO T164397693: link to serializable values docs once it exists */}
 
@@ -100,7 +100,7 @@ function MyComponent() {
 `useFormState` 返回一个包含两个值的数组：
 
 1. 该 form 的 <CodeStep step={1}>当前 state</CodeStep>，初始值为你提供的 <CodeStep step={4}>初始 state</CodeStep>，当表单被提交后则改为你传入的 <CodeStep step={3}>action</CodeStep> 的返回值。
-2. 传入 `<form>` 标签的 `action` 属性的<CodeStep step={2}>新 action</CodeStep>。
+2. 传入 `<form>` 标签的 `action` 属性的 <CodeStep step={2}>新 action</CodeStep>。
 
 表单被提交后，你传入的 <CodeStep step={3}>action</CodeStep> 函数会被执行。返回值将会作为该 form 新的 <CodeStep step={1}>当前 state</CodeStep>。
 

From 6c68f57a2eefd49898f21f5b7532e14438e74941 Mon Sep 17 00:00:00 2001
From: zhangke200377 <zhangke200377@outlook.com>
Date: Mon, 6 Nov 2023 21:54:06 +0800
Subject: [PATCH 03/11] useFormState.md: update translation of Server Action

---
 src/content/reference/react-dom/hooks/useFormState.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
index c81e8fbf06..9d9f98bc4b 100644
--- a/src/content/reference/react-dom/hooks/useFormState.md
+++ b/src/content/reference/react-dom/hooks/useFormState.md
@@ -117,7 +117,7 @@ function action(currentState, formData) {
 
 #### 展示表单错误 {/*display-form-errors*/}
 
-想要展示诸如错误信息或服务器操作返回的 toast 等信息，将 action 包裹进 `useFormState` 即可。
+想要展示诸如错误信息或 Server Action 返回的 toast 等信息，将 action 包裹进 `useFormState` 即可。
 
 <Sandpack>
 

From b5a5026c4c15290275d15d0f631b5739f1a40baa Mon Sep 17 00:00:00 2001
From: zhangke200377 <zhangke200377@outlook.com>
Date: Wed, 8 Nov 2023 09:23:15 +0800
Subject: [PATCH 04/11] useFormState.md: update translation of form action

---
 .../reference/react-dom/hooks/useFormState.md        | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
index 9d9f98bc4b..0f76362fe2 100644
--- a/src/content/reference/react-dom/hooks/useFormState.md
+++ b/src/content/reference/react-dom/hooks/useFormState.md
@@ -11,7 +11,7 @@ canary: true
 
 <Intro>
 
-`useFormState` 是一个可以让你根据某个 form action 的结果更新 state 的 Hook。
+`useFormState` 是一个可以让你根据某个表单动作的结果更新 state 的 Hook。
 
 ```js
 const [state, formAction] = useFormState(fn, initialState);
@@ -29,7 +29,7 @@ const [state, formAction] = useFormState(fn, initialState);
 
 {/* TODO T164397693: link to actions documentation once it exists */}
 
-在组件的顶层调用 `useFormState` 即可创建一个随 [form action 被调用](/reference/react-dom/components/form) 而更新的 state。在调用 `useFormState` 时在参数中传入现有的 form action 函数以及一个初始状态，它就会返回一个新的 action 函数和一个 form state 可供在 form 中使用。这个新的 form state 也会作为参数传入你提供的 form action 函数。
+在组件的顶层调用 `useFormState` 即可创建一个随 [form action 被调用](/reference/react-dom/components/form) 而更新的 state。在调用 `useFormState` 时在参数中传入现有的表单动作函数以及一个初始状态，它就会返回一个新的 action 函数和一个 form state 可供在 form 中使用。这个新的 form state 也会作为参数传入你提供的表单动作函数。
 
 ```js
 import { useFormState } from "react-dom";
@@ -57,7 +57,7 @@ form state 是一个只在表单被提交触发 action 后才会被更新的值
 
 #### 参数 {/*parameters*/}
 
-* `fn`：当按钮被按下或者表单被提交时触发的函数。当函数被调用时，该函数会接收到表单的上一个 state（初始值是你传入的 `initialState` 参数，在其他情况下是上一次执行完该函数的结果）作为函数的第一个参数，余下参数为普通 form action 接到的参数。
+* `fn`：当按钮被按下或者表单被提交时触发的函数。当函数被调用时，该函数会接收到表单的上一个 state（初始值是你传入的 `initialState` 参数，在其他情况下是上一次执行完该函数的结果）作为函数的第一个参数，余下参数为普通表单动作接到的参数。
 * `initialState`：state 的初始值。任何可序列化的值都可接收。当 action 被调用一次后该参数会被忽略。
 
 {/* TODO T164397693: link to serializable values docs once it exists */}
@@ -72,13 +72,13 @@ form state 是一个只在表单被提交触发 action 后才会被更新的值
 #### 注意 {/*caveats*/}
 
 * 在支持 React 服务器组件的框架中使用该功能时，`useFormState` 允许表单在服务器渲染阶段时获得部分交互性。当不使用服务器组件时，它的特性与本地 state 相同。
-* 与直接通过 form action 调用的函数不同，传入 `useFormState` 的函数被调用时，会多传入一个代表 state 的上一个值或初始值的参数作为该函数的第一个参数。
+* 与直接通过表单动作调用的函数不同，传入 `useFormState` 的函数被调用时，会多传入一个代表 state 的上一个值或初始值的参数作为该函数的第一个参数。
 
 ---
 
 ## 用法 {/*usage*/}
 
-### 使用某个 form action 返回的信息 {/*using-information-returned-by-a-form-action*/}
+### 使用某个表单动作返回的信息 {/*using-information-returned-by-a-form-action*/}
 
 在组件的顶层调用 `useFormState` 来获取上一次表单被提交时触发的 action 的返回值。
 
@@ -282,7 +282,7 @@ form button {
 
 ### 我的 action 无法再获取提交的 form data 了 {/*my-action-can-no-longer-read-the-submitted-form-data*/}
 
-当你使用 `useFormState` 包裹你的 action 时，*第一个参数*变为了 form 的当前 state，提交的表单数据被顺移到了*第二个*参数中，与直接使用 form action 是不同的。
+当你使用 `useFormState` 包裹你的 action 时，*第一个参数*变为了 form 的当前 state，提交的表单数据被顺移到了*第二个*参数中，与直接使用表单动作是不同的。
 
 ```js
 function action(currentState, formData) {

From f73998677350c96d711066417fbaa6195628bc72 Mon Sep 17 00:00:00 2001
From: Yucohny <79147654+Yucohny@users.noreply.github.com>
Date: Mon, 13 Nov 2023 16:23:51 +0800
Subject: [PATCH 05/11] Update
 src/content/reference/react-dom/hooks/useFormState.md

---
 src/content/reference/react-dom/hooks/useFormState.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
index f85e38d0fb..5b7c64d12d 100644
--- a/src/content/reference/react-dom/hooks/useFormState.md
+++ b/src/content/reference/react-dom/hooks/useFormState.md
@@ -29,7 +29,7 @@ const [state, formAction] = useFormState(fn, initialState);
 
 {/* TODO T164397693: link to actions documentation once it exists */}
 
-在组件的顶层调用 `useFormState` 即可创建一个随 [表单动作 被调用](/reference/react-dom/components/form) 而更新的 state。在调用 `useFormState` 时在参数中传入现有的表单动作函数以及一个初始状态，它就会返回一个新的 action 函数和一个 form state 可供在 form 中使用。这个新的 form state 也会作为参数传入你提供的表单动作函数。
+在组件的顶层调用 `useFormState` 即可创建一个随 [表单动作被调用](/reference/react-dom/components/form) 而更新的 state。在调用 `useFormState` 时在参数中传入现有的表单动作函数以及一个初始状态，它就会返回一个新的 action 函数和一个 form state 以供在 form 中使用。这个新的 form state 也会作为参数传入提供的表单动作函数。
 
 ```js
 import { useFormState } from "react-dom";

From d01aae3bb942ec3ef71cca59842a0c753918b9b2 Mon Sep 17 00:00:00 2001
From: Yucohny <79147654+Yucohny@users.noreply.github.com>
Date: Mon, 13 Nov 2023 16:23:58 +0800
Subject: [PATCH 06/11] Update
 src/content/reference/react-dom/hooks/useFormState.md

---
 src/content/reference/react-dom/hooks/useFormState.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
index 5b7c64d12d..53c0a54d92 100644
--- a/src/content/reference/react-dom/hooks/useFormState.md
+++ b/src/content/reference/react-dom/hooks/useFormState.md
@@ -49,7 +49,7 @@ function StatefulForm({}) {
 }
 ```
 
-form state 是一个只在表单被提交触发 action 后才会被更新的值。如果该表单没有被提交，该值会保持你传入的初始值不变。
+form state 是一个只在表单被提交触发 action 后才会被更新的值。如果该表单没有被提交，该值会保持传入的初始值不变。
 
 如果配合 Server Action 一起使用，`useFormState` 允许与表单交互的服务器的返回值在 hydration 完成前显示。
 

From ec499b8844f8141ea2d081625ab3b8d8d5e2d274 Mon Sep 17 00:00:00 2001
From: Yucohny <79147654+Yucohny@users.noreply.github.com>
Date: Mon, 13 Nov 2023 16:24:03 +0800
Subject: [PATCH 07/11] Update
 src/content/reference/react-dom/hooks/useFormState.md

---
 src/content/reference/react-dom/hooks/useFormState.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
index 53c0a54d92..beac740b94 100644
--- a/src/content/reference/react-dom/hooks/useFormState.md
+++ b/src/content/reference/react-dom/hooks/useFormState.md
@@ -51,7 +51,7 @@ function StatefulForm({}) {
 
 form state 是一个只在表单被提交触发 action 后才会被更新的值。如果该表单没有被提交，该值会保持传入的初始值不变。
 
-如果配合 Server Action 一起使用，`useFormState` 允许与表单交互的服务器的返回值在 hydration 完成前显示。
+如果配合 Server Actions 一起使用，`useFormState` 允许与表单交互的服务器的返回值在 hydration 完成前显示。
 
 [在下面查看更多用法](#usage)。
 

From 4cf723a10332ac0e7b2098be3266b4fca7579e3c Mon Sep 17 00:00:00 2001
From: Yucohny <79147654+Yucohny@users.noreply.github.com>
Date: Mon, 13 Nov 2023 16:24:10 +0800
Subject: [PATCH 08/11] Update
 src/content/reference/react-dom/hooks/useFormState.md

---
 src/content/reference/react-dom/hooks/useFormState.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
index beac740b94..73d6acc588 100644
--- a/src/content/reference/react-dom/hooks/useFormState.md
+++ b/src/content/reference/react-dom/hooks/useFormState.md
@@ -53,7 +53,7 @@ form state 是一个只在表单被提交触发 action 后才会被更新的值
 
 如果配合 Server Actions 一起使用，`useFormState` 允许与表单交互的服务器的返回值在 hydration 完成前显示。
 
-[在下面查看更多用法](#usage)。
+[请参阅下方更多示例](#usage)。
 
 #### 参数 {/*parameters*/}
 

From 7bec490ee2b03ebb2d03b6ee82bfe953642c437d Mon Sep 17 00:00:00 2001
From: Yucohny <79147654+Yucohny@users.noreply.github.com>
Date: Mon, 13 Nov 2023 16:27:04 +0800
Subject: [PATCH 09/11] docs(cn): review and update

---
 .../reference/react-dom/hooks/useFormState.md | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
index 73d6acc588..a2536e58a6 100644
--- a/src/content/reference/react-dom/hooks/useFormState.md
+++ b/src/content/reference/react-dom/hooks/useFormState.md
@@ -5,13 +5,13 @@ canary: true
 
 <Canary>
 
-`useFormState` Hook 当前仅在 React canary 与 experimental 渠道中可用。请点此了解更多关于 [React 发布渠道](/community/versioning-policy#all-release-channels) 的信息。此外，你需要一款完全支持 [React 服务器组件](/reference/react/use-client) 特性的框架才可以使用 `useFormState` 的所有特性。
+`useFormState` Hook 当前仅在 React canary 与 experimental 渠道中可用。请点此了解更多关于 [React 发布渠道](/community/versioning-policy#all-release-channels) 的信息。此外，需要一款完全支持 [React 服务器组件](/reference/react/use-client) 特性的框架才可以使用 `useFormState` 的所有特性。
 
 </Canary>
 
 <Intro>
 
-`useFormState` 是一个可以让你根据某个表单动作的结果更新 state 的 Hook。
+`useFormState` 是一个可以根据某个表单动作的结果更新 state 的 Hook。
 
 ```js
 const [state, formAction] = useFormState(fn, initialState);
@@ -57,7 +57,7 @@ form state 是一个只在表单被提交触发 action 后才会被更新的值
 
 #### 参数 {/*parameters*/}
 
-* `fn`：当按钮被按下或者表单被提交时触发的函数。当函数被调用时，该函数会接收到表单的上一个 state（初始值是你传入的 `initialState` 参数，在其他情况下是上一次执行完该函数的结果）作为函数的第一个参数，余下参数为普通表单动作接到的参数。
+* `fn`：当按钮被按下或者表单被提交时触发的函数。当函数被调用时，该函数会接收到表单的上一个 state（初始值为传入的 `initialState` 参数，否则为上一次执行完该函数的结果）作为函数的第一个参数，余下参数为普通表单动作接到的参数。
 * `initialState`：state 的初始值。任何可序列化的值都可接收。当 action 被调用一次后该参数会被忽略。
 
 {/* TODO T164397693: link to serializable values docs once it exists */}
@@ -66,7 +66,7 @@ form state 是一个只在表单被提交触发 action 后才会被更新的值
 
 `useFormState` 返回一个包含两个值的数组：
 
-1. 当前的 state。第一次渲染期间，该值为你传入的 `initialState` 参数值。在 action 被调用后该值会变为 action 的返回值。
+1. 当前的 state。第一次渲染期间，该值为传入的 `initialState` 参数值。在 action 被调用后该值会变为 action 的返回值。
 2. 一个新的 action 函数用于在你的 `form` 组件的 `action` 参数或表单中任意一个 `button` 组件的 `formAction` 参数中传递。
 
 #### 注意 {/*caveats*/}
@@ -80,7 +80,7 @@ form state 是一个只在表单被提交触发 action 后才会被更新的值
 
 ### 使用某个表单动作返回的信息 {/*using-information-returned-by-a-form-action*/}
 
-在组件的顶层调用 `useFormState` 来获取上一次表单被提交时触发的 action 的返回值。
+在组件的顶层调用 `useFormState` 以获取上一次表单被提交时触发的 action 的返回值。
 
 ```js [[1, 5, "state"], [2, 5, "formAction"], [3, 5, "action"], [4, 5, "null"], [2, 8, "formAction"]]
 import { useFormState } from 'react-dom';
@@ -99,12 +99,12 @@ function MyComponent() {
 
 `useFormState` 返回一个包含两个值的数组：
 
-1. 该 form 的 <CodeStep step={1}>当前 state</CodeStep>，初始值为你提供的 <CodeStep step={4}>初始 state</CodeStep>，当表单被提交后则改为你传入的 <CodeStep step={3}>action</CodeStep> 的返回值。
+1. 该 form 的 <CodeStep step={1}>当前 state</CodeStep>，初始值为提供的 <CodeStep step={4}>初始 state</CodeStep>，当表单被提交后则改为传入的 <CodeStep step={3}>action</CodeStep> 的返回值。
 2. 传入 `<form>` 标签的 `action` 属性的 <CodeStep step={2}>新 action</CodeStep>。
 
-表单被提交后，你传入的 <CodeStep step={3}>action</CodeStep> 函数会被执行。返回值将会作为该 form 新的 <CodeStep step={1}>当前 state</CodeStep>。
+表单被提交后，传入的 <CodeStep step={3}>action</CodeStep> 函数会被执行。返回值将会作为该表单的新的 <CodeStep step={1}>当前 state</CodeStep>。
 
-你传入的 <CodeStep step={3}>action</CodeStep> 接受到的第一个参数将会变为该 form 的 <CodeStep step={1}>当前 state</CodeStep>。当表单第一次被提交时将会传入你提供的 <CodeStep step={4}>初始 state</CodeStep>，之后都将传入上一次调用 <CodeStep step={3}>action</CodeStep> 函数的返回值。余下参数与未使用 `useFormState` 前接受的参数别无二致<sup><a href="#note1">[1]</a></sup>。
+传入的 <CodeStep step={3}>action</CodeStep> 接受到的第一个参数将会变为该 form 的 <CodeStep step={1}>当前 state</CodeStep>。当表单第一次被提交时将会传入提供的 <CodeStep step={4}>初始 state</CodeStep>，之后都将传入上一次调用 <CodeStep step={3}>action</CodeStep> 函数的返回值。余下参数与未使用 `useFormState` 前接受的参数别无二致<sup><a href="#note1">[1]</a></sup>。
 
 ```js [[3, 1, "action"], [1, 1, "currentState"]]
 function action(currentState, formData) {
@@ -117,7 +117,7 @@ function action(currentState, formData) {
 
 #### 展示表单错误 {/*display-form-errors*/}
 
-想要展示诸如错误信息或 Server Action 返回的 toast 等信息，将 action 包裹进 `useFormState` 即可。
+将 action 包裹进 `useFormState` 即可展示诸如错误信息或 Server Actions 返回的 toast 等信息。
 
 <Sandpack>
 
@@ -190,7 +190,7 @@ form button {
 
 #### 提交表单后展示结构性数据 {/*display-structured-information-after-submitting-a-form*/}
 
-服务器操作的返回值可以为任意可序列化的值。例如，可以返回一个实例，该实例携带一个 boolean 类型的属性表示操作是否成功，同时附带错误信息或更新消息。
+Server Actions 的返回值可以为任意可序列化的值。例如，可以返回一个实例，该实例携带一个 boolean 类型的属性表示操作是否成功，同时附带错误信息或更新消息。
 
 <Sandpack>
 
@@ -282,7 +282,7 @@ form button {
 
 ### 我的 action 无法再获取提交的 form data 了 {/*my-action-can-no-longer-read-the-submitted-form-data*/}
 
-当你使用 `useFormState` 包裹你的 action 时，*第一个参数*变为了 form 的当前 state，提交的表单数据被顺移到了*第二个*参数中，与直接使用表单动作是不同的。
+当使用 `useFormState` 包裹 action 时，第一个参数变为了 form 的当前 state，提交的表单数据被顺移到了第二个参数中，与直接使用表单动作是不同的。
 
 ```js
 function action(currentState, formData) {

From 4fe862ce4b505b55458f8c4e09e0121f1bd966c9 Mon Sep 17 00:00:00 2001
From: Yucohny <79147654+Yucohny@users.noreply.github.com>
Date: Mon, 13 Nov 2023 16:28:38 +0800
Subject: [PATCH 10/11] Update
 src/content/reference/react-dom/hooks/useFormState.md

---
 src/content/reference/react-dom/hooks/useFormState.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
index a2536e58a6..fdfe16561f 100644
--- a/src/content/reference/react-dom/hooks/useFormState.md
+++ b/src/content/reference/react-dom/hooks/useFormState.md
@@ -99,7 +99,7 @@ function MyComponent() {
 
 `useFormState` 返回一个包含两个值的数组：
 
-1. 该 form 的 <CodeStep step={1}>当前 state</CodeStep>，初始值为提供的 <CodeStep step={4}>初始 state</CodeStep>，当表单被提交后则改为传入的 <CodeStep step={3}>action</CodeStep> 的返回值。
+1. 该表单的 <CodeStep step={1}>当前 state</CodeStep>，初始值为提供的 <CodeStep step={4}>初始 state</CodeStep>，当表单被提交后则改为传入的 <CodeStep step={3}>action</CodeStep> 的返回值。
 2. 传入 `<form>` 标签的 `action` 属性的 <CodeStep step={2}>新 action</CodeStep>。
 
 表单被提交后，传入的 <CodeStep step={3}>action</CodeStep> 函数会被执行。返回值将会作为该表单的新的 <CodeStep step={1}>当前 state</CodeStep>。

From c9a444d4e9b6d732ea61aa596de4161eacecad26 Mon Sep 17 00:00:00 2001
From: Yucohny <79147654+Yucohny@users.noreply.github.com>
Date: Mon, 13 Nov 2023 16:28:43 +0800
Subject: [PATCH 11/11] Update
 src/content/reference/react-dom/hooks/useFormState.md

---
 src/content/reference/react-dom/hooks/useFormState.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
index fdfe16561f..b731a16df8 100644
--- a/src/content/reference/react-dom/hooks/useFormState.md
+++ b/src/content/reference/react-dom/hooks/useFormState.md
@@ -104,7 +104,7 @@ function MyComponent() {
 
 表单被提交后，传入的 <CodeStep step={3}>action</CodeStep> 函数会被执行。返回值将会作为该表单的新的 <CodeStep step={1}>当前 state</CodeStep>。
 
-传入的 <CodeStep step={3}>action</CodeStep> 接受到的第一个参数将会变为该 form 的 <CodeStep step={1}>当前 state</CodeStep>。当表单第一次被提交时将会传入提供的 <CodeStep step={4}>初始 state</CodeStep>，之后都将传入上一次调用 <CodeStep step={3}>action</CodeStep> 函数的返回值。余下参数与未使用 `useFormState` 前接受的参数别无二致<sup><a href="#note1">[1]</a></sup>。
+传入的 <CodeStep step={3}>action</CodeStep> 接受到的第一个参数将会变为该表单的 <CodeStep step={1}>当前 state</CodeStep>。当表单第一次被提交时将会传入提供的 <CodeStep step={4}>初始 state</CodeStep>，之后都将传入上一次调用 <CodeStep step={3}>action</CodeStep> 函数的返回值。余下参数与未使用 `useFormState` 前接受的参数别无二致<sup><a href="#note1">[1]</a></sup>。
 
 ```js [[3, 1, "action"], [1, 1, "currentState"]]
 function action(currentState, formData) {