React Native中如何将多表单（多页面）数据提交至同一API请求

核心思路就是你朋友说的：在父组件维护一个统一的表单状态对象，把状态更新方法传递给各个子表单组件，子组件负责更新对应字段的状态，最后父组件统一提交完整数据到API。

下面是完整的示例代码：

1. 父组件（统一管理状态和提交逻辑） #

import React, { useState } from 'react';
import { View, Button, Alert } from 'react-native';
import PersonalInfoForm from './PersonalInfoForm';
import AddressForm from './AddressForm';
import PaymentForm from './PaymentForm';

const ParentFormContainer = () => {
  // 初始化统一的表单状态，包含所有子表单的字段
  const [formData, setFormData] = useState({
    personal: {
      name: '',
      email: '',
      phone: ''
    },
    address: {
      street: '',
      city: '',
      zipCode: ''
    },
    payment: {
      cardNumber: '',
      expiryDate: '',
      cvv: ''
    }
  });

  // 通用的状态更新方法，子组件调用它来更新对应字段
  const updateFormData = (section, field, value) => {
    setFormData(prev => ({
      ...prev,
      [section]: {
        ...prev[section],
        [field]: value
      }
    }));
  };

  // 提交数据到API的方法
  const handleSubmit = async () => {
    try {
      // 替换成你的实际API地址
      const response = await fetch('https://your-api-endpoint.com/submit', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      if (!response.ok) {
        throw new Error('提交失败');
      }

      const result = await response.json();
      Alert.alert('成功', '表单数据已提交');
      console.log('API返回结果:', result);
    } catch (error) {
      Alert.alert('错误', error.message);
      console.error('提交错误:', error);
    }
  };

  return (
    <View style={{ padding: 20, gap: 20 }}>
      {/* 传递对应区块的状态和更新方法给子组件 */}
      <PersonalInfoForm 
        data={formData.personal} 
        onUpdate={(field, value) => updateFormData('personal', field, value)} 
      />
      <AddressForm 
        data={formData.address} 
        onUpdate={(field, value) => updateFormData('address', field, value)} 
      />
      <PaymentForm 
        data={formData.payment} 
        onUpdate={(field, value) => updateFormData('payment', field, value)} 
      />

      {/* 提交按钮 */}
      <Button title="提交所有表单" onPress={handleSubmit} />
    </View>
  );
};

export default ParentFormContainer;

2. 子表单组件示例（个人信息表单） #

import React from 'react';
import { View, TextInput, Text, StyleSheet } from 'react-native';

const PersonalInfoForm = ({ data, onUpdate }) => {
  return (
    <View style={styles.formSection}>
      <Text style={styles.label}>姓名</Text>
      <TextInput
        style={styles.input}
        value={data.name}
        onChangeText={(text) => onUpdate('name', text)}
        placeholder="请输入姓名"
      />

      <Text style={styles.label}>邮箱</Text>
      <TextInput
        style={styles.input}
        value={data.email}
        onChangeText={(text) => onUpdate('email', text)}
        placeholder="请输入邮箱"
        keyboardType="email-address"
      />

      <Text style={styles.label}>手机号</Text>
      <TextInput
        style={styles.input}
        value={data.phone}
        onChangeText={(text) => onUpdate('phone', text)}
        placeholder="请输入手机号"
        keyboardType="phone-pad"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  formSection: {
    gap: 10,
  },
  label: {
    fontSize: 16,
    fontWeight: '500',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
  },
});

export default PersonalInfoForm;

3. 其他子表单组件（地址、支付） #

地址表单AddressForm和支付表单PaymentForm的结构与上面的PersonalInfoForm基本一致，只需修改字段和对应提示信息。比如地址表单字段为street、city、zipCode，支付表单字段为cardNumber、expiryDate、cvv。

关键说明 #

• 父组件的updateFormData是通用方法，通过section参数区分不同子表单区块，避免重复编写多个更新逻辑。
• 每个子组件仅负责自身区块的UI渲染和字段更新，逻辑解耦，便于维护和扩展。
• 提交时直接将完整的formData对象转为JSON发送到API，后端可直接解析对应字段。

内容的提问来源于stack exchange，提问作者Thohid Baig