Next.js 客户端组件向服务端组件传递数据的实践指南

// 错误的写法：func={func()}
<AddProduct func={func()}></AddProduct>

// 正确的写法：func={func}
<AddProduct func={func}></AddProduct>

// app/dashboard/products/page.js
"use server"; // 声明为服务端组件

import Sidebar from '@/components/Sidebar';
import Link from 'next/link';
import { redirect } from 'next/navigation';
import SignOut from 'src/components/SignOut';
import createClient from 'src/lib/supabase-server'; // 确保这是服务端的 Supabase 客户端
import RootLayout from '../../layout'; // 假设这是布局组件
import ProductsTable from '@/components/dashboardComponents/ProductsTable';
import AddProduct from '@/components/dashboardComponents/AddProducts'; // 客户端子组件

export default async function Products() {
  const supabase = createClient(); // 在服务端创建 Supabase 客户端

  const {
    data: { user },
  } = await supabase.auth.getUser();

  // 可选：如果用户未登录，可以重定向
  // if (!user) {
  //   redirect('/login');
  // }

  let { data: productsData, error: fetchError } = await supabase.from('products').select();
  if (fetchError) {
    console.error("Error fetching products:", fetchError);
    productsData = []; // 错误时提供空数组
  }

  // 定义一个服务端函数，用于处理产品添加逻辑
  async function handleAddProduct(id, name) {
    "use server"; // 明确标记为 Server Action
    console.log("Starting product upload for:", { id, name });
    try {
      const { data, error } = await supabase
        .from('products')
        .insert([
          { id: id, name: name, customer_id: user?.id || 'default_customer_id' }, // 使用实际用户ID或默认值
        ]);

      if (error) {
        console.error("Error uploading product:", error);
        // 可以抛出错误或返回错误信息
        return { success: false, error: error.message };
      }
      console.log("Product uploaded successfully:", data);
      // 成功后可以考虑重新验证数据或进行重定向
      // revalidatePath('/dashboard/products'); // 如果需要立即刷新数据
      return { success: true, data };
    } catch (err) {
      console.error("Unexpected error during product upload:", err);
      return { success: false, error: "An unexpected error occurred." };
    }
  }

  return (
    <div>
      <ProductsTable data={productsData}></ProductsTable>
      {/* 关键修正：传递函数引用，而不是函数调用的结果 */}
      <AddProduct onAddProduct={handleAddProduct}></AddProduct>
    </div>
  );
}

// components/dashboardComponents/AddProducts.js
"use client"; // 声明为客户端组件

import React, { useState } from 'react';

// 接收一个名为 onAddProduct 的 Prop
function AddProduct({ onAddProduct }) {
    const [id, setId] = useState('');
    const [name, setName] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false); // 添加加载状态
    const [error, setError] = useState(null); // 添加错误状态
    const [success, setSuccess] = useState(false); // 添加成功状态

    const handleIdChange = (e) => {
        setId(e.target.value);
        setError(null); // 清除错误信息
        setSuccess(false); // 清除成功信息
    };

    const handleNameChange = (e) => {
        setName(e.target.value);
        setError(null); // 清除错误信息
        setSuccess(false); // 清除成功信息
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        setIsSubmitting(true);
        setError(null);
        setSuccess(false);

        if (!id || !name) {
            setError("ID and Name cannot be empty.");
            setIsSubmitting(false);
            return;
        }

        try {
            // 调用通过 Prop 传入的服务端函数
            const result = await onAddProduct(id, name);
            if (result && result.success) {
                console.log(`Product added successfully: ID ${id}, Name ${name}`);
                setSuccess(true);
                setId(''); // 清空表单
                setName('');
            } else {
                setError(result?.error || "Failed to add product.");
            }
        } catch (err) {
            console.error("Client-side error calling server action:", err);
            setError("An unexpected error occurred during submission.");
        } finally {
            setIsSubmitting(false);
        }
    };

    return (
        <form onSubmit={handleSubmit} className="card space-y-4 p-4 bg-white shadow rounded-lg">
            <h2 className="text-xl font-semibold text-gray-800">Add New Product</h2>
            <div>
                <label htmlFor="id" className="block text-sm font-medium text-gray-700">
                    Product ID
                </label>
                <input 
                    type="text"
                    id="id"
                    value={id}
                    onChange={handleIdChange}
                    className="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                    disabled={isSubmitting}
                />
            </div>
            <div>
                <label htmlFor="name" className="block text-sm font-medium text-gray-700">
                    Product Name
                </label>
                <input
                    type="text"
                    id="name"
                    value={name}
                    onChange={handleNameChange}
                    className="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                    disabled={isSubmitting}
                />
            </div>
            <button 
                type="submit" 
                className="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
                disabled={isSubmitting}
            >
                {isSubmitting ? 'Adding Product...' : 'Add Product'}
            </button>
            {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
            {success && <p className="text-green-500 text-sm mt-2">Product added successfully!</p>}
        </form>
    );
}

export default AddProduct;