我有一个名为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,
    },
]

推荐答案

try 添加此.

//Address.js
const changeState =()=>{
    setAddressForm((prev)=>(!prev));
}
<AddressCard functionChangeState={changeState}/>


//AddressCard.js
const HandleClick =()=>{
    props.functionChangeState();
}

Reactjs相关问答推荐

eslint -无法解析模块的路径@web3modal/ethers/react导入/no-unresolved

为什么Next.js 14无法解析页面路由路径?

面对动画警告:未指定`useNativeDriver`.这是必需的选项,并且必须在REACT本机中显式设置为`true`或`False`

使用REACT-RUTER-DOM链接仅更新一个搜索参数

无法将react 路由状态从路由传递给子组件

如何使图像zoom 并移动到点击点

GoLang有条件地为.js.gz提供服务(如果它存在),否则为.js

ReactJS:唯一项目的数量总和

在reduce()方法上得到NaN

我可以在加载器函数中多次 fetch() 并使用一次 useloaderdata() 提取它吗?

无法设置 null 的属性(设置src)

我应该如何将字符串作为props 传递给 React 组件?

我收到Uncaught TypeError: props.handleSelect is not a function

如何使用 React 更改 Material UI 中 ButtonGroup 的 colored颜色 ?

next js 13 在获取中使用标头时动态渲染而不是静态渲染?

使用 Vite 的 React 中的路由无法正常工作(构建中)

Github 页面无法正确呈现 CSS,因为它是本地的

如何通过单击多个选项中的特定项目在模态上呈现不同的标题?

下拉菜单在 AppBar 中未正确对齐

ClearInterval 在 React 中的 useRef 没有按预期工作