无法将函数传递给客户端组件NextJS

Question

我正在尝试通过我的

/app/api/updatePassword.js

组件将函数从我的文件夹

server

传递到我的

client

组件。

这是我的

updatePassword.js

:

import api from '@/services/AxiosSetup';

export default async function updatePassword(formData) {
    try {
      const response = await api.post('/auth/change-password', {
        formData
      });
      if (response.data) {
        return response.data;
      }
    } catch (error) {
        console.error(error.message);
      throw error;
    }
}

这是我的

/app/instellingen/page.js

:

//Components
import Header from '../components/header/Header';
import PasswordForm from '../components/password-form/PasswordForm';
import updatePassword from '../api/updatePassword';

export default function Instellingen() {
  return (
    <>
    <Header />
      <main className="main-content h-screen bg-slate-50">
        <div className="container mx-auto flex justify-between items-center px-5">
          <div className="page-content">
            <h1 className="text-3xl mb-8">Instellingen</h1>
            <div className="block p-8 bg-white border border-slate-200">
              <h2 className="text-xl mb-4">Wachtwoord wijzigen</h2>
              <PasswordForm updatePassword={updatePassword} />
            </div>
          </div>
        </div>
      </main>
    </>
  )
}

这是我的

/app/components/password-form/PasswordForm.js

:

'use client';

import React, { useState } from "react";

//3rd party
import { Loader } from 'rsuite';

//3rd party styles
import "rsuite/dist/rsuite.min.css";

const PasswordForm = ({ updatePassword }) => {

    //Variables
    const [buttonText, setButtonText] = useState('Wachtwoord bijwerken');
    const [formData, setFormData] = useState({
        currentPassword: '',
        password: '',
        passwordConfirmation: ''
    });
    const [isLoading, setIsLoading] = useState(false);

    const handleInputChange = (name, value) => {
        setFormData((prevData) => ({
        ...prevData,
        [name]: value,
        }));
    };

    const handlePassword = async (event) => {
        event.preventDefault();
        try {
            await updatePassword(formData);
        } catch (error) {
            console.error('Error updating password:', error);
        }
    }

    return (
        <div id="change-password">
            <form id="change-password" onSubmit={handlePassword}>
                <div className="w-full mb-3 form-field">
                    <input 
                        type="password" 
                        placeholder="Huidig wachtwoord" 
                        value={formData.currentPassword} 
                        onChange={(e) => handleInputChange('currentPassword', e.target.value)}
                        className="block w-full rounded p-1.5 border border-gray-300 text-gray-900"
                        disabled={isLoading} 
                        required 
                    />
                </div>
                <div className="w-full mb-3 form-field">
                    <input 
                        type="password" 
                        placeholder="Nieuw wachtwoord" 
                        value={formData.password} 
                        onChange={(e) => handleInputChange('password', e.target.value)}
                        className="block w-full rounded p-1.5 border border-gray-300 text-gray-900"
                        disabled={isLoading} 
                        required 
                    />
                </div>
                <div className="w-full mb-3 form-field">
                    <input 
                        type="password" 
                        placeholder="Huidig wachtwoord" 
                        value={formData.passwordConfirmation} 
                        onChange={(e) => handleInputChange('passwordConfirmation', e.target.value)}
                        className="block w-full rounded p-1.5 border border-gray-300 text-gray-900"
                        disabled={isLoading} 
                        required 
                    />
                </div>
                <div className="form-footer">
                    <input type="submit" value={buttonText} className="w-full font-medium p-3 mt-3 rounded button" disabled={isLoading} />
                    {isLoading ? <Loader size="sm" className="loader" /> : null}
                </div>
            </form>
        </div>
    );
};

export default PasswordForm;

但它返回给我一个

error

：

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  <... updatePassword={function}>

Answer 1

您无法将函数从服务器组件传递到客户端组件。

在您的用例中，只需将 updatePassword 函数直接导入客户端组件即可。