在 onclick 期间，JSX 中存在 prop 验证错误，因为传递的函数不是函数？

Question

存在道具验证问题，我将一个函数作为道具传递，但出现错误，说它不是函数。

Contact.jsx

 import Avatar from "./Avatar";
import PropTypes from "prop-types";

export default function Contact({ id, username, func, selected, online }) {
  return (
    <>
      <div
        key={id}
        onClick={() => func(id)}
        className={
          "flex border-b border-blue-100  items-center gap-2 cursor-pointer " +
          (selected ? "bg-blue-200" : "")
        }
      >
        {selected && <div className="w-1 bg-blue-500 h-12 rounded-r-md"></div>}
        <div className="flex gap-2 py-2 pl-2 items-center">
          <Avatar online={online} username={username} userId={id} />
          <span> {username}</span>
        </div>
      </div>
    </>
  );
}


Contact.propTypes = {
  id: PropTypes.string.isRequired,
  username: PropTypes.object.isRequired,
  func: PropTypes.func.isRequired,
  selected: PropTypes.bool.isRequired,
  online: PropTypes.bool.isRequired,
};

道具被传递的点

 <Contact
            id={userId}
            username={onlinePeopleExcludingOurUser[userId].username}
            func={() => setselectedUserId(userId)}
            selected={userId == selectedUserId}
            online={true}
          />

const [selectedUserId, setselectedUserId] = useState(null);

setselectedUserId 是一个 useState fn

我尝试更改道具类型并使用 AI，但没有任何解决方案我仍然收到错误，因为 func 未被识别为 Contact.jsx 中 onclick 中的函数

Answer 1

尝试这样做：

<Contact
    ...
     func={setselectedUserId}
    ...
/>