mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-23 20:23:08 +00:00
Fix type issues with useActionState docs (#6798)
This commit is contained in:
committed by
GitHub
parent
1df378ffa1
commit
3dd67d1420
@@ -132,7 +132,9 @@ function ChangeName({ name, setName }) {
|
||||
return error;
|
||||
}
|
||||
redirect("/path");
|
||||
}
|
||||
return null;
|
||||
},
|
||||
null,
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -152,16 +154,20 @@ In the next section, we'll break down each of the new Action features in React 1
|
||||
To make the common cases easier for Actions, we've added a new hook called `useActionState`:
|
||||
|
||||
```js
|
||||
const [error, submitAction, isPending] = useActionState(async (previousState, newName) => {
|
||||
const error = await updateName(newName);
|
||||
if (error) {
|
||||
// You can return any result of the action.
|
||||
// Here, we return only the error.
|
||||
return error;
|
||||
}
|
||||
|
||||
// handle success
|
||||
});
|
||||
const [error, submitAction, isPending] = useActionState(
|
||||
async (previousState, newName) => {
|
||||
const error = await updateName(newName);
|
||||
if (error) {
|
||||
// You can return any result of the action.
|
||||
// Here, we return only the error.
|
||||
return error;
|
||||
}
|
||||
|
||||
// handle success
|
||||
return null;
|
||||
},
|
||||
null,
|
||||
);
|
||||
```
|
||||
|
||||
`useActionState` accepts a function (the "Action"), and returns a wrapped Action to call. This works because Actions compose. When the wrapped Action is called, `useActionState` will return the last result of the Action as `data`, and the pending state of the Action as `pending`.
|
||||
|
||||
@@ -173,7 +173,7 @@ You can compose Server Actions with `useActionState` for the common case where y
|
||||
import {updateName} from './actions';
|
||||
|
||||
function UpdateName() {
|
||||
const [submitAction, state, isPending] = useActionState(updateName);
|
||||
const [submitAction, state, isPending] = useActionState(updateName, {error: null});
|
||||
|
||||
return (
|
||||
<form action={submitAction}>
|
||||
@@ -190,7 +190,7 @@ For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useForm
|
||||
|
||||
### Progressive enhancement with `useActionState` {/*progressive-enhancement-with-useactionstate*/}
|
||||
|
||||
Server Actions also support progressive enhancement with the second argument of `useActionState`.
|
||||
Server Actions also support progressive enhancement with the third argument of `useActionState`.
|
||||
|
||||
```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "/name/update"], [3, 6, "submitAction"], [3, 9, "submitAction"]]
|
||||
"use client";
|
||||
@@ -198,7 +198,7 @@ Server Actions also support progressive enhancement with the second argument of
|
||||
import {updateName} from './actions';
|
||||
|
||||
function UpdateName() {
|
||||
const [submitAction] = useActionState(updateName, `/name/update`);
|
||||
const [, submitAction] = useActionState(updateName, null, `/name/update`);
|
||||
|
||||
return (
|
||||
<form action={submitAction}>
|
||||
|
||||
@@ -157,7 +157,7 @@ import { useActionState } from 'react';
|
||||
import requestUsername from './requestUsername';
|
||||
|
||||
function UsernameForm() {
|
||||
const [returnValue, action] = useActionState(requestUsername, 'n/a');
|
||||
const [state, action] = useActionState(requestUsername, null, 'n/a');
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -165,7 +165,7 @@ function UsernameForm() {
|
||||
<input type="text" name="username" />
|
||||
<button type="submit">Request</button>
|
||||
</form>
|
||||
<p>Last submission request returned: {returnValue}</p>
|
||||
<p>Last submission request returned: {state}</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user