NextJS 导出函数而不是对象

Question

在 NextJS 中我有以下服务器功能：

'use server'

import { fetchWrapper } from "@/utils/fetchWrapper";

const getPosts = async() : Promise<any[]> => {
    var posts = await fetchWrapper.get('api/posts');
    return posts;
}

export const postService = { getPosts };

我想在客户端组件中使用它：

"use client"

import { postService } from "@/services/postService";
import { useEffect, useState } from "react";

console.log("postService: ", postService);

export default function Home() {
  const [posts, setPosts] = useState<any[]>();

  useEffect(() => {
    const fetchPosts = async () => {
      const results = await postService.getPosts();
      console.log('results : ', results);
      setPosts(results);
    };

    fetchPosts();
  }, []);

  return (
    <h1>
      {posts && posts.map(post => 
        <div key={post.id}>{post.title}</div>
      )}
    </h1>
  );
}

我的控制台日志显示：

postService:  ƒ () {
    // $FlowFixMe[method-unbinding]
    var args = Array.prototype.slice.call(arguments);
    return callServer(id, args);
  }

随后出现错误：

page.tsx:13 Uncaught (in promise) TypeError: _services_postService__WEBPACK_IMPORTED_MODULE_1__.postService.getPosts is not a function

根据我的理解，

postService

被导出为函数而不是对象。为什么会出现这种情况？

Answer 1

Next.js 希望您仅从以

"use server"

开头的文件中导出异步函数。您应该导出

getPosts

而不是

postService

。

export const getPosts = async() : Promise<any[]> => {
    var posts = await fetchWrapper.get('api/posts');
    return posts;
}

然后，如果您想将它们作为一个组导入，您可以：

import { getPosts } from "@/services/postService"
// or
import * as postService from "@/services/postService"

await postService.getPosts();

---

供您参考，服务器操作用于变异，不适合获取数据，因为它按顺序运行而不是并行运行。您可以重构代码以获取服务器组件中的数据并将交互性移至嵌套的客户端组件：

export default async function Home() {
  const posts = await fetchWrapper.get('api/posts');

  return (
    <h1>
      {posts && posts.map(post => 
        <div key={post.id}>{post.title}</div>
      )}
    </h1>
  );
}