React传递setAddressForm作为Prop时报错“不是函数”的问题排查

核心问题 #

你在父组件Address.js中渲染<AddressCard isAdd={true} />时，没有将setAddressForm作为props传递给子组件。子组件AddressCard尝试调用这个未传递的方法，导致报错"setAddressForm is not a function"。

另外，你通过AddressData.map渲染的所有AddressCard实例也未传递setAddressForm，虽然这些卡片的isAdd为false暂时不会触发点击逻辑，但从组件健壮性角度，建议统一处理。

修复后的代码 #

1. 父组件 Address.js #

//Address.js
import { useState } from 'react';
import AddressCard from './AddressCard';
import AddressData from './AddressData';

export default function Address() {
  const [addressForm, setAddressForm] = useState(false);

  return (
    <div> 
      {!addressForm && (
        <div className="addressCards">
          {/* 必须传递setAddressForm给需要触发状态变更的卡片 */}
          <AddressCard isAdd={true} setAddressForm={setAddressForm} />
          {console.log(addressForm)}

          {AddressData.map((cardProps, index) => {
            // 给动态渲染的卡片也传递setAddressForm（后续若需修改状态可直接使用）
            return (
              <AddressCard key={index} {...cardProps} setAddressForm={setAddressForm} />
            );
          })}
        </div>
      )}
      {/* addressForm为true时显示的表单区域 */}
      {addressForm && <div>地址编辑表单内容</div>}
    </div>
  );
}

2. 子组件 AddressCard.js #

添加类型检查增强健壮性，避免未传递方法时出错：

//AddressCard.js
export default function AddressCard({ setAddressForm, isAdd, ...props }) {
  const handleClick = () => {
    // 仅当isAdd为true且setAddressForm是有效函数时执行
    if (isAdd && typeof setAddressForm === 'function') {
      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">
        {!isAdd && <div className="name">{props.name}</div>}
        {!isAdd && (
          <div>
            <Edit className="icon"/>
            <DeleteTwoTone className="icon"/>
          </div>
        )}
      </div>
      {!isAdd && <div className="address">{props.address}</div>}
      {!isAdd && <div className="contact">Contact: {props.contact}</div>}
      {!isAdd && (
        <div className="delivery-field">
          <LocationOnIcon className="location-icon"/>
          <a className="delivery">Add Delivery Instructions</a>
        </div>
      )}
      {isAdd && <div>+ Add Address</div>}
    </div>
  );
}

额外优化点 #

• 动态渲染列表时，必须给每个AddressCard添加唯一的key属性，符合React的列表渲染规范
• 子组件中对setAddressForm做类型检查，避免因props缺失导致的运行时错误

内容的提问来源于stack exchange，提问作者Sachidananda MG