React Native子组件调用父组件传参异常及无限重渲染问题

核心实现逻辑 #

React 跨组件传参调用的规则非常统一：父组件将自身定义的函数通过 props 传递给子组件，子组件在需要触发的时机（如点击事件、表单提交等）调用该函数，将需要传递的内容作为入参传入即可，没有额外的黑魔法。

现有代码的问题根因 #

你的代码里有三个直接导致功能失效、无限重渲染的错误：

• 事件绑定写法错误：onPress 属性需要接收一个函数引用作为点击回调，你当前写的 onPress={AddCard(xxx)} 会在组件每次渲染时立刻执行 AddCard 函数，不会等待用户点击。AddCard 执行时会调用 setDataArray 触发组件重渲染，重渲染过程中又会立刻执行 AddCard，直接形成「渲染→更新状态→重渲染」的死循环，这就是无限重渲染的直接原因。
• 状态更新违反 React 不可变原则：let array = DataArray 仅获取了原状态数组的引用，没有创建新数组，后续调用 array.unshift 是直接修改原始状态值，React 的状态对比逻辑检测不到引用变化，会导致视图更新不生效，就算没有死循环，新卡片也无法正常渲染。
• 笔误导致弹窗逻辑失效：代码中的 modalVisibleOff 只写了函数名，没有加 () 执行调用，就算添加卡片的逻辑跑通，弹窗也不会正常关闭。

修正后代码 #

父组件部分 #

// 原状态定义无需修改
const [DataArray, setDataArray] = useState([
  {
    title: 'Saudi Arabia',
    guest: '2 Guests',
    description: 'This is my Description',
    location: 'Riadh, KSA',
    estimateCost: '$1000',
    duration: '1 Month',
    groupSize: 'small',
    hostedIn: 'Michigan',
    includes: '2 Return Tickets',
    date: '12 July 2022',
    notes: 'N/A',
    locationDetails: 'House # 12, Makhdoom street, Al-Riadh, KSA',
  },
]);

// 修正后的添加卡片函数
const AddCard = (a, b, c, d, e, f, g, h, i, j, k, l) => {
  // 创建全新的数组，不直接修改原状态
  const newArray = [
    {
      title: a,
      guest: b,
      description: c,
      location: d,
      estimateCost: e,
      duration: f,
      groupSize: g,
      hostedIn: h,
      includes: i,
      date: j,
      notes: k,
      locationDetails: l
    },
    ...DataArray
  ];
  setDataArray(newArray);
  // 加括号执行关闭弹窗的方法
  modalVisibleOff();
};

// 如果是传给子组件，直接作为prop传递即可
// <ChildComponent AddCard={AddCard} />

子组件/点击事件部分 #

<TouchableOpacity
  // 用箭头函数包裹逻辑，点击时才会执行AddCard传参
  onPress={() => AddCard(
    Title,
    Guest,
    Description,
    Location,
    EstimateCost,
    Duration,
    GroupSize,
    HostedIn,
    Includes,
    Date,
    Notes,
    LocationDetails,
  )}
  style={styles.Button}>
  <Text style={styles.ButtonText}>Submit</Text>
</TouchableOpacity>

如果AddCard是子组件从props接收的，先从props中解构出方法再使用，绑定写法完全一致。

优化建议 #

• 12个位置参数维护成本极高，传参时只要顺序错一个就会导致所有字段错位，建议改成对象传参，不需要记忆参数顺序，出错概率大幅降低：

  // 函数定义改为接收一个对象
  const AddCard = (cardData) => {
    const newArray = [cardData, ...DataArray];
    setDataArray(newArray);
    modalVisibleOff();
  };
  
  // 调用时传入对象，字段顺序不影响结果
  onPress={() => AddCard({
    title: Title,
    guest: Guest,
    description: Description,
    location: Location,
    estimateCost: EstimateCost,
    duration: Duration,
    groupSize: GroupSize,
    hostedIn: HostedIn,
    includes: Includes,
    date: Date,
    notes: Notes,
    locationDetails: LocationDetails
  })}
  

• 如果AddCard需要传递给多层子组件，建议用useCallback包裹该函数，避免不必要的子组件重渲染。

内容的提问来源于stack exchange，提问作者Muhammad Usman