Error: Expected `onClick` listener to be a function, instead got a value of `object` type

Question

我正在我的 React 应用程序中实现一个模式，但遇到了奇怪的错误，Error: Expected `onClick` listener to be a function, instead got a value of `object` type.。这里令人困惑的是，我已经在应用程序的另一部分使用相同的逻辑实现了模态，但它不会产生这样的错误。

下面是重要的代码片段。

index.js

import React, { useState } from "react";
import ProfileSave from "../../components/modal/profileSave";
const test = () => {

  const [saveModal, setSaveModal] = useState(false);
  const [save, setSave] = useState(false);

  return (
<>
<button className="w-[165px] h-[60px] text-center px-4 py-2 text-sm text-white bg-[#3A76BF] rounded-md font-bold text-[16px]" onClick={saveShowModal}>
  Save
</button>

{saveModal && (
  <ProfileSave
    open={saveModal}
    handleClose={() => setSaveModal(!saveModal)}
    handleSave={handleSave}
  />
)}
</>
export default test

profileSave.js

import React from "react";

const ProfileSave = (open, handleClose, handleModal) => {
  return open ? (
    <div className="fixed inset-0 z-10 overflow-y-auto">
      <div
        className="fixed inset-0 w-full h-full bg-black opacity-40"
        onClick={handleClose}
      ></div>
    </div>
  ) : (
    ""
  );
};

export default ProfileSave;

Answer 1

您需要提取组件收到的道具

试试这个：

import React from "react";

const ProfileSave = ({open, handleClose, handleModal}) => {
  return open ? (
    <div className="fixed inset-0 z-10 overflow-y-auto">
      <div
        className="fixed inset-0 w-full h-full bg-black opacity-40"
        onClick={handleClose}
      ></div>
    </div>
  ) : (
    ""
  );
};

export default ProfileSave;

Error: Expected `onClick` listener to be a function, instead got a value of `object` type

Error: Expected `onClick` listener to be a function, instead got a value of `object` type

javascript

reactjs

onclick

event-handling