dydm.me

REACT2024-07-13

React 中的新 hook: useActionState

`useActionState`

基于表单动作结果更新状态的新的 React hook.

像智能助手一样记住某些东西并在提交表单时改变它们.

查看官方文档

如何使用

import { useActionState } from 'react';

const [state, formAction] = useActionState(actionFunction, initialState);

state 表示当前表单状态.
formAction 是一个在表单中使用的新动作.
actionFunction 是一个函数, 当表单提交时触发.
initialState 是表单状态初始值.

什么时候使用 `useActionState`

当想要基于表单提交更新状态时, 尤其是使用服务端组件并想要更快的响应时可以使用.

import { useActionState } from 'react';

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

function StateFullForm() {
    const [state, formAction] = useActionState(increment, 0);

    return (
        <form>
            {state}
            <button formAction={formAction}>Increment</button>
        </form>
    )
}

上面的例子中, 每次点击按钮, 计数都会加一. useActionState hook 负责表单提交时更新状态.

React 中的新 hook: useActionState