我正在将API调用结果传递给另一个组件。NextUI的组件在传递props时似乎很好,但在将值分配给selectedKeys属性时遇到了问题,随后的字段无法正常工作。
错误:Select:传递给“selectedKeys”的键“”在集合中不存在。
下面是我的代码:
const PersonalInfo = () => {
const [activeTab, setActiveTab] = useState("Basic Details");
let basicDetailsObj: BasicDetailsType;
let ProfileReq: ProfileType = {
empid: "00004",
profile: activeTab,
};
const handleGetProfile = () => {
if(accessToken!=''){
const user: LoginDetails = use(getUserDetailsByToken(accessToken));
let ProfileReq: ProfileType = {
empid: user.Empid,
profile: activeTab,
};
const result: getprofile201Type = use(getProfile(accessToken,ProfileReq));
//profile = result.getprofile201[0];
switch (activeTab) {
case "Basic Details":
basicDetailsObj = result?.getprofile201[0];
break;
default:
break;
}
}
}
const renderTabContent = () => {
handleGetProfile()
switch (activeTab) {
case "Basic Details":
return <BasicDetails
firstName= {basicDetailsObj?.firstName}
lastName= {basicDetailsObj?.lastName}
gender= {basicDetailsObj?.gender}
/>;
default:
return <BasicDetails
firstName= {basicDetailsObj?.firstName}
lastName= {basicDetailsObj?.lastName}
gender= {basicDetailsObj?.gender}
/>;
}
};
return (
<div className="mt-3 h-auto m-0 justify-center flex gap-3 flex-col">
{renderTabContent()}
</div>
);
};
export default PersonalInfo;
字符串
下面是BasicDetails组件:
import React from "react";
import Image from "next/image";
import { Button, Input, Select, SelectItem } from "@nextui-org/react";
interface IBasicDetails {
firstName: string;
lastName: string;
gender: string;
}
const BasicDetails: React.FC<IBasicDetails> = ({
firstName,
lastName,
gender
}) => {
const [genderValue, setGenderValue] = React.useState(new Set([gender]));
return (
<div className="mb-5 h-full m-0 justify-center ">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5 text-gray-600">
{/* First Name */}
<div className="flex flex-col">
<Input
type="text"
id="firstname"
value={firstName}
disabled
isRequired
label="First Name"
placeholder=" "
labelPlacement="outside"
/>
</div>
{/* Last Name */}
<div className="flex flex-col">
<Input
type="text"
id="lastname"
value={lastName}
disabled
isRequired
label="Last Name"
placeholder=" "
labelPlacement="outside"
/>
</div>
{/* Gender */}
<div className="flex flex-col">
<Select
labelPlacement="outside"
label="Gender"
placeholder="Select Gender"
selectedKeys={genderValue}
className="max-w-lg text-black font-bold"
isRequired
fullWidth
>
<SelectItem key="Male" value="Male">
Male
</SelectItem>
<SelectItem key="Female" value="Female">
Female
</SelectItem>
<SelectItem key="Other" value="Other">
Other
</SelectItem>
</Select>
</div>
</div>
</div>
);
};
export default BasicDetails;
型
我试过NextUI的文档,它不工作。
1条答案
按热度按时间rqdpfwrv1#
更新:我的错误的原因是在初始呈现时传递了一个未定义或“”的值,该值在
我已经通过设置字段的默认值解决了这个问题,然后我使用useEffect从父组件设置值。
字符串
默认值应存在于