存在道具验证问题,我将一个函数作为道具传递,但出现错误,说它不是函数。
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 中的函数
尝试这样做:
<Contact
...
func={setselectedUserId}
...
/>