docs(cn): translate reference/react-dom/useFormStatus into Chinese (#1348)

Co-authored-by: Xavi Lee <[email protected]>
Co-authored-by: Xleine <[email protected]>

Author: 3 people

src/content/reference/react-dom/hooks/useFormStatus.md

@@ -5,13 +5,13 @@ canary: true
 
 <Canary>
 
-The `useFormStatus` Hook is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+`useFormStatus` Hook 目前仅在 React canary 与 experimental 渠道中可用。在此处了解更多关于 [React 发布渠道](/community/versioning-policy#all-release-channels) 的信息。
 
 </Canary>
 
 <Intro>
 
-`useFormStatus` is a Hook that gives you status information of the last form submission.
+`useFormStatus` 是一个提供上次表单提交状态信息的 Hook。
 
 ```js
 const { pending, data, method, action } = useFormStatus();
@@ -23,19 +23,19 @@ const { pending, data, method, action } = useFormStatus();
 
 ---
 
-## Reference {/*reference*/}
+## 参考 {/*reference*/}
 
 ### `useFormStatus()` {/*use-form-status*/}
 
-The `useFormStatus` Hook provides status information of the last form submission.
+`useFormStatus` Hook 提供了上次表单提交的状态信息。
 
 ```js {5},[[1, 6, "status.pending"]]
 import { useFormStatus } from "react-dom";
 import action from './actions';
 
 function Submit() {
   const status = useFormStatus();
-  return <button disabled={status.pending}>Submit</button>
+  return <button disabled={status.pending}>提交</button>
 }
 
 export default App() {
@@ -47,42 +47,42 @@ export default App() {
 }
 ```
 
-To get status information, the `Submit` component must be rendered within a `<form>`. The Hook returns information like the <CodeStep step={1}>`pending`</CodeStep> property which tells you if the form is actively submitting. 
+`Submit` 组件必须在 `<form>` 内部渲染以获取状态信息。该 Hook 返回诸如 <CodeStep step={1}>`pending`</CodeStep> 属性的信息，用于指示表单是否正在提交中。
 
-In the above example, `Submit` uses this information to disable `<button>` presses while the form is submitting.
+在上面的示例中，`Submit` 利用此信息来在表单提交时禁用 `<button>` 按钮的按压操作。
 
-[See more examples below.](#usage)
+[参见下方更多示例](#usage)。
 
-#### Parameters {/*parameters*/}
+#### 参数 {/*parameters*/}
 
-`useFormStatus` does not take any parameters.
+`useFormStatus` 不接收任何参数。
 
-#### Returns {/*returns*/}
+#### 返回值 {/*returns*/}
 
-A `status` object with the following properties:
+`useFormStatus` 返回一个包含以下属性的 `status` 对象：
 
-* `pending`: A boolean. If `true`, this means the parent `<form>` is pending submission. Otherwise, `false`.
+* `pending`：布尔值。如果为 `true`，则表示父级 `<form>` 正在等待提交；否则为 `false`。
 
-* `data`: An object implementing the [`FormData interface`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) that contains the data the parent `<form>` is submitting. If there is no active submission or no parent `<form>`, it will be `null`.
+* `data`：实现了 [`FormData interface`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) 的对象，包含父级 `<form>` 正在提交的数据；如果没有进行提交或没有父级 `<form>`，它将为 `null`。
 
-* `method`: A string value of either `'get'` or `'post'`. This represents whether the parent `<form>` is submitting with either a `GET` or `POST` [HTTP method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). By default, a `<form>` will use the `GET` method and can be specified by the [`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method) property.
+* `method`：字符串，可以是 `'get'` 或 `'post'`。表示父级 `<form>` 使用 `GET` 或 `POST` [HTTP 方法](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) 进行提交。默认情况下，`<form>` 将使用 `GET` 方法，并可以通过 [`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method) 属性指定。
 
-[//]: # (Link to `<form>` documentation. "Read more on the `action` prop on `<form>`.")
-* `action`: A reference to the function passed to the `action` prop on the parent `<form>`. If there is no parent `<form>`, the property is `null`. If there is a URI value provided to the `action` prop, or no `action` prop specified, `status.action` will be `null`.
+[//]: # (链接到 `<form>` 文档。"在 `<form>` 上的 `action` 属性上阅读更多信息。")
+* `action`：一个传递给父级 `<form>` 的 `action` 属性的函数引用。如果没有父级 `<form>`，则该属性为 `null`。如果在 `action` 属性上提供了 URI 值，或者未指定 `action` 属性，`status.action` 将为 `null`。
 
-#### Caveats {/*caveats*/}
+#### 注意 {/*caveats*/}
 
-* The `useFormStatus` Hook must be called from a component that is rendered inside a `<form>`. 
-* `useFormStatus` will only return status information for a parent `<form>`. It will not return status information for any `<form>` rendered in that same component or children components.
+* `useFormStatus` Hook 必须从在 `<form>` 内渲染的组件中调用。
+* `useFormStatus` 仅会返回父级 `<form>` 的状态信息。它不会返回同一组件或子组件中渲染的任何 `<form>` 的状态信息。
 
 ---
 
-## Usage {/*usage*/}
+## 用法 {/*usage*/}
 
-### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
-To display a pending state while a form is submitting, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned.
+### 在表单提交期间显示待定状态 {/*display-a-pending-state-during-form-submission*/}
+可以在 `<form>` 中渲染的子组件中调用 `useFormStatus` Hook，并读取返回的 `pending` 属性，以在表单提交期间显示待定状态。
 
-Here, we use the `pending` property to indicate the form is submitting. 
+下面的示例使用 `pending` 属性指示表单正在提交。
 
 <Sandpack>
 
@@ -94,7 +94,7 @@ function Submit() {
   const { pending } = useFormStatus();
   return (
     <button type="submit" disabled={pending}>
-      {pending ? "Submitting..." : "Submit"}
+      {pending ? "提交中……" : "提交"}
     </button>
   );
 }
@@ -133,30 +133,30 @@ export async function submitForm(query) {
 
 <Pitfall>
 
-##### `useFormStatus` will not return status information for a `<form>` rendered in the same component. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/}
+##### `useFormStatus` 不会返回在同一组件中渲染的 `<form>` 的状态信息 {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/}
 
-The `useFormStatus` Hook only returns status information for a parent `<form>` and not for any `<form>` rendered in the same component calling the Hook, or child components.
+`useFormStatus` Hook 只会返回父级 `<form>` 的状态信息，而不会返回在调用 Hook 的同一组件中渲染的任何 `<form>` 的状态信息，也不会返回子组件的状态信息。
 
 ```js
 function Form() {
-  // 🚩 `pending` will never be true
-  // useFormStatus does not track the form rendered in this component
+  // 🚩 `pending` 永远不会为 true
+  // useFormStatus 不会跟踪在此组件中渲染的表单
   const { pending } = useFormStatus();
   return <form action={submit}></form>;
 }
 ```
 
-Instead call `useFormStatus` from inside a component that is located inside `<form>`.
+正确的做法是从位于 `<form>` 内部的组件中调用 `useFormStatus`。
 
 ```js
 function Submit() {
-  // ✅ `pending` will be derived from the form that wraps the Submit component
+  // ✅ `pending` 将从包裹 Submit 组件的表单派生
   const { pending } = useFormStatus(); 
   return <button disabled={pending}>...</button>;
 }
 
 function Form() {
-  // This is the <form> `useFormStatus` tracks
+  // <form> `useFormStatus` 将会追踪它
   return (
     <form action={submit}>
       <Submit />
@@ -167,11 +167,11 @@ function Form() {
 
 </Pitfall>
 
-### Read the form data being submitted {/*read-form-data-being-submitted*/}
+### 查看正在提交的表单数据 {/*read-form-data-being-submitted*/}
 
-You can use the `data` property of the status information returned from `useFormStatus` to display what data is being submitted by the user.
+可以使用从 `useFormStatus` 返回的状态信息中的 `data` 属性来显示用户正在提交的数据是什么。
 
-Here, we have a form where users can request a username. We can use `useFormStatus` to display a temporary status message confirming what username they have requested.
+下面的示例中有一个表单，用户可以请求一个用户名。那么可以使用 `useFormStatus` 来显示一个临时状态消息，确认请求了什么用户名。
 
 <Sandpack>
 
@@ -203,13 +203,13 @@ export default function UsernameForm() {
 
   return (
     <>
-      <label>Request a Username: </label><br />
+      <label>请求用户名：</label><br />
       <input type="text" name="username" />
       <button type="submit" disabled={pending}>
-        {pending ? 'Submitting...' : 'Submit'}
+        {pending ? '提交中……' : '提交'}
       </button>
       {showSubmitted ? (
-        <p>Submitted request for username: {submittedUsername.current}</p>
+        <p>提交请求用户名：{submittedUsername.current}</p>
       ) : null}
     </>
   );
@@ -250,12 +250,12 @@ export async function submitForm(query) {
 
 ---
 
-## Troubleshooting {/*troubleshooting*/}
+## 疑难解答 {/*troubleshooting*/}
 
-### `status.pending` is never `true` {/*pending-is-never-true*/}
+### `status.pending` 从不为 `true` {/*pending-is-never-true*/}
 
-`useFormStatus` will only return status information for a parent `<form>`. 
+`useFormStatus` 仅会返回父级 `<form>` 的状态信息。
 
-If the component that calls `useFormStatus` is not nested in a `<form>`, `status.pending` will always return `false`. Verify `useFormStatus` is called in a component that is a child of a `<form>` element.
+如果调用 `useFormStatus` 的组件未嵌套在 `<form>` 中，`status.pending` 总是返回 `false`。请验证 `useFormStatus` 是否在 `<form>` 元素的子组件中调用。
 
-`useFormStatus` will not track the status of a `<form>` rendered in the same component. See [Pitfall](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) for more details.
+`useFormStatus` 不会追踪同一组件中渲染的 `<form>` 的状态。参阅 [陷阱](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) 以了解更多详细信息。