修复React组件PropType错误：formData类型不符问题

错误含义 #

控制台抛出的警告明确指出：传递给FirstSection组件的formData参数为字符串类型，但组件通过PropTypes声明的预期类型是对象类型，类型不匹配导致触发该警告。

控制台错误原文：

Warning: Failed prop type: Invalid prop formData of type string supplied to FirstSection, expected object.
at FirstSection (http://localhost:5173/src/Components/applySections/FirstSection.jsx?t=1708303938624:14:25)
at ApplicationForm (http://localhost:5173/src/Containers/ApplicationForm.jsx?t
at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom)

问题根源 #

从你提供的代码来看，父组件ApplicationForm的初始状态中formData.FirstSection确实是对象，但问题出在子组件的更新逻辑上：

• 子组件FirstSection的updateFormData函数调用onFormChange时，传递的是单个字段名（字符串）和字段值；
• 父组件的handleFormChange会直接将第二个参数赋值给formData[section]，如果传入的value是字符串，就会把原本是对象的formData.FirstSection覆盖成字符串，后续渲染时传给子组件的formData就变成了字符串，触发PropTypes警告。

修复方案 #

1. 修正子组件的数据更新逻辑 #

子组件需要构造完整的section对象传递给父组件，而不是单个字段和值：

const FirstSection = ({ formData = {}, onFormChange }) => {
  const updateFormData = (field, value) => {
    // 基于现有formData生成新对象，更新指定字段
    const newSectionData = { ...formData, [field]: value };
    // 将完整对象传给父组件
    onFormChange(newSectionData);
  };

  // ...组件其余逻辑
};

2. 确认父组件回调逻辑匹配 #

父组件的handleFormChange函数逻辑无需修改，因为渲染子组件时已经绑定了section为"FirstSection"，只需确保子组件传递的是完整对象即可：

// 父组件原有代码无需改动
const handleFormChange = (section, data) => {
  setFormData((prevData) => ({
    ...prevData,
    [section]: data,
  }));
};

3. 完善子组件PropTypes声明 #

明确子组件的PropTypes定义，避免类型混淆：

// 在FirstSection组件末尾添加
FirstSection.propTypes = {
  formData: PropTypes.object.isRequired,
  onFormChange: PropTypes.func.isRequired,
};

4. 验证全流程逻辑 #

确保父组件初始状态中所有section均为对象类型，且所有子组件的更新逻辑都遵循“传递完整section对象”的规则，避免单个值覆盖整个section对象。

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