From c9c950b94f454adf44d9cead4cfd6deb676eefbb Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Thu, 19 Oct 2023 03:10:40 +0000 Subject: [PATCH 1/8] docs(cn): translate reference/react-dom/useFormStatus into Chinese --- .../react-dom/hooks/useFormStatus.md | 86 +++++++++---------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index abaa9b6f2b..6c7c394431 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -5,13 +5,13 @@ canary: true -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) 的信息。 -`useFormStatus` is a Hook that gives you status information of the last form submission. +`useFormStatus` 是一个 Hook,用于提供上次表单提交的状态信息。 ```js const { pending, data, method, action } = useFormStatus(); @@ -23,11 +23,11 @@ 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"; @@ -35,7 +35,7 @@ import action from './actions'; function Submit() { const status = useFormStatus(); - return + return } export default App() { @@ -47,42 +47,42 @@ export default App() { } ``` -To get status information, the `Submit` component must be rendered within a `
`. The Hook returns information like the `pending` property which tells you if the form is actively submitting. +`Submit` 组件必须在 `` 内部渲染以获取状态信息。该 Hook 返回诸如 `pending` 属性的信息,用于指示表单是否正在提交中。 -In the above example, `Submit` uses this information to disable ` ); } @@ -133,30 +133,30 @@ export async function submitForm(query) { -##### `useFormStatus` will not return status information for a `` rendered in the same component. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/} +##### `useFormStatus` 不会返回在同一组件中渲染的 `` 的状态信息 {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/} -The `useFormStatus` Hook only returns status information for a parent `` and not for any `` rendered in the same component calling the Hook, or child components. +`useFormStatus` Hook 只会返回父级 `` 的状态信息,而不会返回在调用 Hook 的同一组件中渲染的任何 `` 的状态信息,也不会返回子组件的状态信息。 ```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 ; } ``` -Instead call `useFormStatus` from inside a component that is located inside `
`. +而应该从位于 `` 内部的组件中调用 `useFormStatus`。 ```js function Submit() { - // ✅ `pending` will be derived from the form that wraps the Submit component + // ✅ `pending` 将从包裹 Submit 组件的表单派生 const { pending } = useFormStatus(); return ; } function Form() { - // This is the `useFormStatus` tracks + // `useFormStatus` 将会追踪它 return ( @@ -167,11 +167,11 @@ function Form() { -### 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` 来显示一个临时状态消息,确认请求了什么用户名。 @@ -203,13 +203,13 @@ export default function UsernameForm() { return ( <> -
+
{showSubmitted ? ( -

Submitted request for username: {submittedUsername.current}

+

提交请求用户名:{submittedUsername.current}

) : 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 ``. +`useFormStatus` 仅会返回父级 `` 的状态信息。 -If the component that calls `useFormStatus` is not nested in a ``, `status.pending` will always return `false`. Verify `useFormStatus` is called in a component that is a child of a `` element. +如果调用 `useFormStatus` 的组件未嵌套在 `` 中,`status.pending` 总是返回 `false`。请验证 `useFormStatus` 是否在一个 `` 元素的子组件中调用。 -`useFormStatus` will not track the status of a `` 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` 不会追踪同一组件中渲染的 `` 的状态。参阅 [陷阱](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) 以了解更多详细信息。 From 18c30c29f55f64c95e00a3677e5fbaffb28a0c3a Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Thu, 19 Oct 2023 11:16:06 +0800 Subject: [PATCH 2/8] Update src/content/reference/react-dom/hooks/useFormStatus.md Co-authored-by: Xavi Lee --- src/content/reference/react-dom/hooks/useFormStatus.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index 6c7c394431..e5bc7f1619 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -11,7 +11,7 @@ canary: true -`useFormStatus` 是一个 Hook,用于提供上次表单提交的状态信息。 +`useFormStatus` 是一个用于提供上次表单提交的状态信息的 Hook。 ```js const { pending, data, method, action } = useFormStatus(); From 95c9bb05f70144c7bfe0feb428d63209b5218545 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Fri, 20 Oct 2023 09:04:54 +0800 Subject: [PATCH 3/8] Update src/content/reference/react-dom/hooks/useFormStatus.md Co-authored-by: Xleine --- src/content/reference/react-dom/hooks/useFormStatus.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index e5bc7f1619..08ddbd89b8 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -68,7 +68,7 @@ export default App() { * `method`:字符串,可以是 `'get'` 或 `'post'`。表示父级 `` 使用 `GET` 或 `POST` [HTTP 方法](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) 进行提交。默认情况下,`` 将使用 `GET` 方法,并可以通过 [`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method) 属性指定。 [//]: # (链接到 `` 文档。"在 `` 上的 `action` 属性上阅读更多信息。") -* `action`:引用传递给父级 `` 的 `action` 属性的函数。如果没有父级 ``,则该属性为 `null`。如果在 `action` 属性上提供了 URI 值,或者未指定 `action` 属性,`status.action` 将为 `null`。 +* `action`:一个传递给父级 `` 的 `action` 属性的函数引用。如果没有父级 ``,则该属性为 `null`。如果在 `action` 属性上提供了 URI 值,或者未指定 `action` 属性,`status.action` 将为 `null`。 #### 注意 {/*caveats*/} From a1af04fae7e4dc5aebe7c8ad2a87e9025108ce02 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Fri, 20 Oct 2023 09:05:02 +0800 Subject: [PATCH 4/8] Update src/content/reference/react-dom/hooks/useFormStatus.md Co-authored-by: Xleine --- src/content/reference/react-dom/hooks/useFormStatus.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index 08ddbd89b8..c6d7bb267f 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -80,7 +80,7 @@ export default App() { ## 用法 {/*usage*/} ### 在表单提交期间显示待定状态 {/*display-a-pending-state-during-form-submission*/} -可以在一个在 `` 中渲染的组件中调用 `useFormStatus` Hook,并读取返回的 `pending` 属性,以在表单提交期间显示待定状态。 +可以在 `` 中渲染的子组件中调用 `useFormStatus` Hook,并读取返回的 `pending` 属性,以在表单提交期间显示待定状态。 下面的示例使用 `pending` 属性指示表单正在提交。 From bb1750033df76df194682fd24525feeb2794f409 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Fri, 20 Oct 2023 09:05:11 +0800 Subject: [PATCH 5/8] Update src/content/reference/react-dom/hooks/useFormStatus.md Co-authored-by: Xleine --- src/content/reference/react-dom/hooks/useFormStatus.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index c6d7bb267f..436920b4ba 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -146,7 +146,7 @@ function Form() { } ``` -而应该从位于 `` 内部的组件中调用 `useFormStatus`。 +正确的做法是从位于 `` 内部的组件中调用 `useFormStatus`。 ```js function Submit() { From 4f406b6e92c5eb9acd67304311db570d81e1a9c7 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Fri, 20 Oct 2023 09:05:18 +0800 Subject: [PATCH 6/8] Update src/content/reference/react-dom/hooks/useFormStatus.md Co-authored-by: Xleine --- src/content/reference/react-dom/hooks/useFormStatus.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index 436920b4ba..900f45aa91 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -256,6 +256,6 @@ export async function submitForm(query) { `useFormStatus` 仅会返回父级 `` 的状态信息。 -如果调用 `useFormStatus` 的组件未嵌套在 `` 中,`status.pending` 总是返回 `false`。请验证 `useFormStatus` 是否在一个 `` 元素的子组件中调用。 +如果调用 `useFormStatus` 的组件未嵌套在 `` 中,`status.pending` 总是返回 `false`。请验证 `useFormStatus` 是否在 `` 元素的子组件中调用。 `useFormStatus` 不会追踪同一组件中渲染的 `` 的状态。参阅 [陷阱](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) 以了解更多详细信息。 From b8110fe9b59bde4fde55b8c6629eaba40d4760ac Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Fri, 20 Oct 2023 09:07:33 +0800 Subject: [PATCH 7/8] Update src/content/reference/react-dom/hooks/useFormStatus.md Co-authored-by: Xleine --- src/content/reference/react-dom/hooks/useFormStatus.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index 900f45aa91..eeaed6f487 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -11,7 +11,7 @@ canary: true -`useFormStatus` 是一个用于提供上次表单提交的状态信息的 Hook。 +`useFormStatus` 是一个提供上次表单提交状态信息的 Hook。 ```js const { pending, data, method, action } = useFormStatus(); From 4c1abb1d4db628098e3718b34dcf49dc800f7cf6 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Fri, 20 Oct 2023 09:24:38 +0800 Subject: [PATCH 8/8] Update src/content/reference/react-dom/hooks/useFormStatus.md Co-authored-by: Xleine --- src/content/reference/react-dom/hooks/useFormStatus.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index eeaed6f487..2999d87a72 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -63,7 +63,7 @@ export default App() { * `pending`:布尔值。如果为 `true`,则表示父级 `` 正在等待提交;否则为 `false`。 -* `data`:实现了 [`FormData interface`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) 的对象,包含父级 `` 正在提交的数据;如果没有活动提交或没有父级 ``,它将为 `null`。 +* `data`:实现了 [`FormData interface`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) 的对象,包含父级 `` 正在提交的数据;如果没有进行提交或没有父级 ``,它将为 `null`。 * `method`:字符串,可以是 `'get'` 或 `'post'`。表示父级 `` 使用 `GET` 或 `POST` [HTTP 方法](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) 进行提交。默认情况下,`` 将使用 `GET` 方法,并可以通过 [`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method) 属性指定。