我有一个名为AddressCard.js的卡片组件.我在父页面Address.js中调用它.
我将setAddressForm作为一个props 传递并将其设置为true,但我收到一个错误,即"setAddressForm不是一个函数".
//Address.js
export default function Address() {
const [addressForm, setAddressForm] = useState(false);
<div>
{!addressForm && (
<div className="addressCards">
<AddressCard isAdd={true} />
{console.log(addressForm)}
{AddressData.map((cardProps) => {
return (
<AddressCard {...cardProps} />
);
})}
</div>
//AddressCard.js
export default function AddressCard({setAddressForm,isAdd,...props}) {
const handleClick=()=>{
if(isAdd){
setAddressForm(true);
}
}
return (
<div className="address-card-container" onClick={handleClick}>
{props.isDefault?<div className="isDefault">Default</div>:<div className="isDefault"> </div>}
<div className="name-and-icons">
{!props.isAdd&&<div className="name">{props.name}</div>}
{!props.isAdd&&<div>
<Edit className="icon"/>
<DeleteTwoTone className="icon"/>
</div>}
</div>
{!props.isAdd&&<div className="address">
{props.address}
</div>}
{!props.isAdd&&<div className="contact">Contact: {props.contact}</div>}
{!props.isAdd&&<div className="delivery-field">
<LocationOnIcon className="location-icon"/>
<a className="delivery">Add Delivery Instructions</a>
</div>}
{props.isAdd&& <div>+ Add Address</div>}
</div>
);
}
//AddressData.js
const AddressData=[
{
name:"Rahul Mishra",
address:"Raiya Kar Bhavan Nr Times Of India, Ashram Road AHEMEDABAD, GUJARAT 380009 India",
contact:"9988776655",
isDefault:true,
},
{
name:"Rahul Mishra",
address:"Raiya Kar Bhavan Nr Times Of India, Ashram Road AHEMEDABAD, GUJARAT 380009 India",
contact:"9988776655",
isDefault:false,
},
]