React Native 如何获取循环渲染的多个IndividualInfoCard组件的全部输入数据

你之前手动把JSX元素push到indCards数组、想通过遍历这个数组拿子组件内部数据的思路走不通——这个数组里存的只是React用来描述界面的元素对象，不是实际渲染后的组件实例，根本接触不到子组件内部维护的state，自然拿不到输入的值。

这是React处理多表单集合场景的标准做法，完全符合单向数据流的设计，不需要额外搞复杂的ref逻辑。

具体改造步骤 #

1. 父组件统一管理所有表单数据 #

在IndividualDetails.js里，直接定义一个和个人数量等长的状态数组，每个元素对应一个人的所有输入字段，初始化时就按照你需要的最终格式填充空值：

// 父组件引入useState
import { useState } from 'react';

const IndividualDetails = () => {
  const totalIndividuals = 3; // 保留你原有的数量计算逻辑

  // 统一存储所有个人信息的状态，初始结构就是你需要的最终数组格式
  const [individualList, setIndividualList] = useState(
    Array.from({length: totalIndividuals}, (_, idx) => ({
      ind: idx + 1,
      fullName: '',
      email: '',
      passportNRIC: '',
      phoneNumber: '',
      dob: ''
    }))
  );

  // 单个字段更新的通用方法
  const updateField = (individualIndex, fieldName, fieldValue) => {
    setIndividualList(prevList => 
      prevList.map((item, i) => 
        i === individualIndex ? {...item, [fieldName]: fieldValue} : item
      )
    );
  };

2. 替换原来手动push卡片的逻辑 #

渲染卡片时不再手动把JSX塞到临时数组，直接遍历状态数组生成组件，把当前人对应的数据、更新回调当props传入：

const renderIndividualCards = () => {
    return individualList.map((person, index) => (
      <IndividualInfoCard
        key={person.ind} // 用稳定的人员序号当key，避免后续列表变动时状态串台
        noOfInd={person.ind}
        personData={person}
        onFieldUpdate={(field, value) => updateField(index, field, value)}
      />
    ))
  };

3. 简化子组件逻辑 #

把IndividualInfoCard内部原来的5个useState全部删掉，直接用父组件传进来的props绑定输入值，输入变化时通过回调把值传回父组件：

const IndividualInfoCard = ({noOfInd, personData, onFieldUpdate}) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Individual {noOfInd}</Text>
      <TextInput 
        placeholder={'Enter Full Name *'} 
        value={personData.fullName} 
        onChangeText={(text) => onFieldUpdate('fullName', text)} 
        style={styles.textField} 
        editable={true} 
      />
      <TextInput 
        placeholder={'Enter Email *'} 
        value={personData.email} 
        onChangeText={(text) => onFieldUpdate('email', text)} 
        style={styles.textField} 
        editable={true} 
      />
      <TextInput 
        placeholder={'Enter Passport or NRIC Number *'} 
        value={personData.passportNRIC} 
        onChangeText={(text) => onFieldUpdate('passportNRIC', text)} 
        style={styles.textField} 
        editable={true} 
      />
      <TextInput 
        placeholder={'Phone Number *'} 
        value={personData.phoneNumber} 
        onChangeText={(text) => onFieldUpdate('phoneNumber', text)} 
        style={styles.textField} 
        editable={true} 
      />
      <TextInput 
        placeholder={'Date of Birth *'} 
        value={personData.dob} 
        onChangeText={(text) => onFieldUpdate('dob', text)} 
        style={styles.textField} 
        editable={true} 
      />
    </View>
  );
};

4. 按钮点击时直接获取汇总数据 #

因为所有输入值从一开始就实时同步存在父组件的individualList数组里，按钮点击时根本不需要遍历找子组件，直接取这个数组就是符合要求的最终结果：

return (
    <View>
      {renderIndividualCards()}
      <MainActionButton 
        title={'Continue'} 
        pressEvent={() => {
          // individualList 结构完全匹配需求：[{ind:1, fullName:'xxx', ...}, ...]
          alert(JSON.stringify(individualList));
          // 后续做校验、提交接口都可以直接使用这个变量
        }} 
      />
    </View>
  );
};

如果出于历史原因必须保留子组件内部的独立state，不想做状态提升，也可以通过forwardRef+useImperativeHandle的方式，把每个子组件的内部数据通过ref暴露给父组件获取。但这种写法会破坏React单向数据流的设计，后续维护成本很高，只适合特殊场景临时用，不推荐作为常规实现。

内容的提问来源于stack exchange，提问作者Chaudhry Talha