警告：只有普通对象可以从服务器组件传递到客户端组件

Question

我创建了一个应用程序，能够在地图上搜索护理院并通过表单添加新护理院。

背景：一切都在开发模式下工作，但在生产中，地图没有刷新以包含新添加的护理院。用于获取护理院数据的 API 在构建时运行，之后后续请求返回相同的数据，即不包括新数据。（我不明白为什么会发生这种情况）

作为解决方案，我使用服务器操作来获取护理之家数据并将其返回到客户端地图组件。

现在我收到一条警告，指出只有普通对象可以从服务器组件传递到客户端组件。不支持具有 toJSON 方法的对象。在将其传递给 props 之前手动将其转换为简单值。

如果您知道为什么 api 仅在构建时运行或者我如何解决此警告，我将非常感激。我对 next.js 和一般开发来说是相对初学者，所以如果不清楚的话，我很抱歉。

链接到仓库： https: //github.com/niallam22/lottie/blob/main/src/app/components/careHomeMap.jsx

_actions.js

export async function getCareHomes(){
  try {
    await connectMongoDB();
    const careHomes = await CareHome.find();
    console.log('api/carehome careHomes: ',careHomes);
    // Return the list of care homes in the response
    return careHomes;
  } catch (error) {
    // Handle any errors that occur during the query
    console.error('Error:', error);
    
    // Return an error response
    return { message: 'Error fetching care homes' };
  }
}

'use client'

import { useEffect, useState } from "react";
import { getCareHomes } from '../_actions'


export default function CareHomeMap({ map, home }) {
  const [careHomeData, setCareHomeData] = useState();

  useEffect(()=>{
    try {
        getCareHomes().then(data =>{
          setCareHomeData(data)
        })

        // fetchCareHomes().then(data =>{
        //   setCareHomeData(data)
        // })
    } catch (error) {
      console.log(error)
    }
  },[])

Answer 1

您应该在将数据传递到页面以使用数据之前，转换为字符串，然后转换为 json

数据={JSON.parse(JSON.stringify(unit))}