React 19 中的 useActionState Hooks

在 React 官网中有 19-beta 版本的文档，其中就引入了一个新的 Hook useActionState。该 Hook 是作为表单的一个操作，不仅可以获得表单内容，还可以把表单事件添加到 Hook里。下面我们来看一下 useActionState 的使用。

useActionState

因为该 Hook 是为表单事件特定的，所以我们绑定在 form 的 action 属性上。该 Hook 接收三个参数，其中前两个参数为必须，一是表单行为事件，也就是 action 方法，第二个参数是表单中某个属性的初始状态值 initialState，第三个参数是可选项 permalink。useActionState 的返回参数为两个，第一个是新的属性状态值，第二个是表单行为事件。

const [newState, formAction] = useActionState(action, initialState)

注意的是，第一次渲染的时候，newState 等于 initialState。

接下来我们定义一个 action，把该 action 传入到 useActionState 中，并把返回的新的事件绑定在表单上。

async function incrementAction(previousState, formData) {
    return previousState + 1
}

const [newState, formAction] = useActionState(incrementAction, 0)

<form>
    {newState}
    <button formAction={formAction} > increment </button>
</form>

注意的事，自定义的事件本身也接收两个参数，在这里即是 incrementAction，第一个参数是之前的属性状态值，第二个参数是整体表单值，也就是 FormData。这是一个标准规范值，以 key/value 组成。如果有多个 input 标签和 select 标签，我们可以通过  formData.get('key') 来获取响应的表单内容。

接下来我们可以通过我们自定义的事件来控制表单行为和获取数据。