Next.js中使用useActionState带参数调用函数的疑问

方案1：包装处理器函数传参 #

如果移除按钮不需要结合表单使用，直接通过包装函数把task.id传递给useActionState返回的formAction即可：

首先调整你的action函数，让它接收任务ID作为参数：

async function removeTaskAction(taskId, prevState) {
  // 调用已有的removeTask函数
  await removeTask(taskId);
  // 可返回操作状态，比如成功/失败信息
  return { success: true };
}

然后在父组件中使用useActionState，并包装处理器函数：

import { useActionState } from 'react';
import RemoveButton from './RemoveButton';

function TaskItem({ task }) {
  // 初始化useActionState，传入action函数和初始状态
  const [actionState, formAction] = useActionState(removeTaskAction, { success: false });

  // 包装函数，将task.id传入formAction
  const handleRemoveTask = () => {
    formAction(task.id);
  };

  return (
    <div>
      <span>{task.content}</span>
      {/* 将包装后的函数传给RemoveButton */}
      <RemoveButton onClick={handleRemoveTask} />
    </div>
  );
}

你的RemoveButton组件保持原有逻辑即可：

function RemoveButton({ onClick }) {
  return <button onClick={onClick}>移除</button>;
}

方案2：结合表单隐藏字段传参 #

如果场景适配Form Actions模式（比如React Server Components场景），可以通过表单的隐藏字段传递task.id，无需额外包装函数：

调整action函数从FormData中获取任务ID：

async function removeTaskAction(formData, prevState) {
  const taskId = formData.get('taskId');
  await removeTask(taskId);
  return { success: true };
}

父组件中用表单包裹按钮，添加隐藏字段：

import { useActionState } from 'react';

function TaskItem({ task }) {
  const [actionState, formAction] = useActionState(removeTaskAction, { success: false });

  return (
    <div>
      <span>{task.content}</span>
      <form action={formAction}>
        {/* 隐藏字段传递task.id */}
        <input type="hidden" name="taskId" value={task.id} />
        <button type="submit">移除</button>
      </form>
    </div>
  );
}

关键说明 #

• 方案1更适合客户端组件的点击事件场景，直接传递参数更直观；
• 方案2符合React Form Actions的设计规范，尤其适合服务端组件中处理表单提交的场景；
• 两种方案都能替代直接调用removeTask(task.id)的方式，同时利用useActionState管理操作后的状态（比如显示成功提示、更新UI）。

内容的提问来源于stack exchange，提问作者taha maatof