Next.js中如何在组件获取Server Actions异步函数的返回数据？

你之前的代码问题在于直接将handleSubmit函数赋值给response变量，这只是引用了函数本身，并没有执行它来获取Gemini的响应。而且handleSubmit是异步函数，需要正确触发调用并处理返回的结果。下面是两种可行的实现方式：

方式1：使用useActionState钩子（推荐） #

useActionState是Next.js专门用来处理Server Actions状态的钩子，可以方便地管理表单提交后的响应数据：

import { useActionState } from 'react';
import { handleSubmit } from '@/actions/action';

const PromptBox = () => {
  // 初始化响应状态为空字符串，第二个参数是Server Action函数
  const [response, formAction] = useActionState(handleSubmit, '');

  return (
    <div className="promptBox h-[80vh] bg-[#1E1E1E] m-4 rounded-lg p-4 font-medium">
      {/* 表单：action绑定处理函数，method设为POST */}
      <form action={formAction} className="mb-4">
        <input
          type="text"
          name="promptInput" // 这里的name要和formData.get("promptInput")对应
          placeholder="输入你的问题..."
          className="p-2 rounded w-full mb-2 bg-[#2D2D2D] text-white"
        />
        <button type="submit" className="p-2 bg-blue-600 text-white rounded">
          发送
        </button>
      </form>
      {/* 显示Gemini返回的响应 */}
      <div className="text-white">{response}</div>
    </div>
  );
};

export default PromptBox;

方式2：手动触发Server Action（结合useState） #

如果你需要更灵活的触发时机（比如不是通过表单提交），可以用useState存储响应，手动调用handleSubmit：

import { useState } from 'react';
import { handleSubmit } from '@/actions/action';

const PromptBox = () => {
  const [response, setResponse] = useState('');
  const [inputValue, setInputValue] = useState('');

  const sendPrompt = async () => {
    // 创建FormData对象，模拟表单数据
    const formData = new FormData();
    formData.append('promptInput', inputValue);
    
    // 调用Server Action并更新状态
    const res = await handleSubmit(formData);
    setResponse(res);
  };

  return (
    <div className="promptBox h-[80vh] bg-[#1E1E1E] m-4 rounded-lg p-4 font-medium">
      <div className="mb-4">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="输入你的问题..."
          className="p-2 rounded w-full mb-2 bg-[#2D2D2D] text-white"
        />
        <button onClick={sendPrompt} className="p-2 bg-blue-600 text-white rounded">
          发送
        </button>
      </div>
      <div className="text-white">{response}</div>
    </div>
  );
};

export default PromptBox;

关键说明 #

• Server Action是异步函数，必须通过await调用才能获取返回值。
• React组件中需要用状态（useState或useActionState）来存储异步获取的响应数据，这样数据更新时组件会自动重新渲染，显示最新结果。
• 第一种方式中，表单的name属性必须和formData.get("promptInput")中的名称一致，否则无法获取到用户输入。

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