Fix type issues with useActionState docs (#6798)

This commit is contained in:
Sebastian Silbermann
2024-04-30 08:57:48 +02:00
committed by GitHub
parent 1df378ffa1
commit 3dd67d1420
3 changed files with 22 additions and 16 deletions

View File

@@ -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`.

View File

@@ -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}>

View File

@@ -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>
</>
);
}