如何在客户端Nextjs14执行服务器动作？

Question

我知道当我使用“use client”指令时，可以通过单击按钮或提交表单来调用服务器操作，但如何自动执行服务器操作 当页面加载时。

当我加载页面时，我有一个 id，然后我想执行一个服务器操作，该操作加载给定人员的详细信息，例如他的姓名、位置、电话号码等，这取决于 sqlite3 数据库中的 id。

有人可以给出此场景的一个工作示例吗？

哪里出了问题？

export function getMeal(meal){
    return db.prepare('SELECT * from meals WHERE id=@id').get(meal);
}

'use client';
import {useSearchParams} from 'next/navigation';
import {useFormState} from "react-dom";
import {updateMeal} from "@/lib/action";
import classes from "@/app/add/page.module.css";
import {useState} from "react";
import {getMeal} from "@/lib/meals";


export default function UpdateExisting() {

    const searchParams = useSearchParams()
    const id = searchParams.get('id');

    useEffect(() => {
        async function getDataFromServerAction() {
            const data = await getMeal(id);
            console.log(data);
        }
        // Call the above function
        getDataFromServerAction();
    },[])

Answer 1

将服务器操作写入不同的位置，主要是在操作文件中，该文件的顶部添加了“use server”指令。 然后调用 useEffect 中的 getDataFromServerAction() 方法。这对我有用

 'use server'
 async function getDataFromServerAction() {
            const data = await getMeal(id);
            console.log(data);
        }


'use client';
import {useSearchParams} from 'next/navigation';
import {useFormState} from "react-dom";
import {updateMeal} from "@/lib/action";
import classes from "@/app/add/page.module.css";
import {getDataFromServerAction} from "@/lib/action";
import {useState} from "react";
import {getMeal} from "@/lib/meals";


export default function UpdateExisting() {

    const searchParams = useSearchParams()
    const id = searchParams.get('id');

    useEffect(() => {
       getDataFromServerAction().then()
    },[])