React动态输入框问题：展示数据库用户数据并支持编辑

问题场景 #

从数据库拉取动态字段生成输入框，用户返回编辑时，输入框设置value后内容没法修改。比如5个输入框用户只填了2个，要把已填数据显示在对应框里，但编辑时输入内容始终不变。

核心问题 #

• 输入框value绑定的是platformInputs里的item.inputData，但platformInputs只在初始化时设置一次，后续没更新，导致输入框内容跟不上用户输入。
• handleChange里没拿输入框的最新值（e.target.value），反而传了旧的input.inputData，formValues存的一直是初始值。
• formValues初始是数组，但实际用的是对象，类型不匹配导致状态更新异常。

修复步骤 #

1. 修正formValues初始类型 #

把formValues初始值改成对象，和后续存储结构统一：

const [formValues, setFormValues] = useState({});

2. 初始化时把用户数据导入formValues #

在fetchPlatformInputs里，把用户已填数据存到formValues，让platformInputs只保存输入字段的元数据（别直接改items的inputData）：

const fetchPlatformInputs = async () => {
  const fetchedInputs = await API.graphql({
    query: sortInputsByType,
    variables: { type: "*", sortDirection: "ASC" },
  });

  const { items } = fetchedInputs.data.sortInputsByType;
  // 初始化formValues，存入用户已填数据
  const initialFormValues = {};
  contextUser.inputData.forEach(contextData => {
    const matchedItem = items.find(item => item.inputType === contextData.inputType);
    if (matchedItem) {
      initialFormValues[contextData.inputType] = {
        inputType: contextData.inputType,
        inputData: contextData.inputData,
        isFabIcon: matchedItem.isFabIcon,
        iconColor: matchedItem.iconColor,
        imagePath: matchedItem.imagePath,
      };
    }
  });
  setFormValues(initialFormValues);
  setPlatformInputs(items); // platformInputs只存输入框的配置信息
};

3. 调整输入框value的绑定逻辑 #

输入框优先取formValues里对应字段的inputData，没有就显示空值，这样既能展示用户初始数据，又能跟着formValues更新：

<MDBInput
  name={`input_${input.inputType}`}
  label={capitalizeWords(input.inputType)}
  type="text"
  value={formValues[input.inputType]?.inputData || ''}
  onChange={(e) =>
    handleChange(
      e,
      input.inputType,
      input.isFabIcon,
      input.iconColor,
      input.imagePath
    )
  }
/>

4. 修复handleChange，用最新输入值 #

在handleChange里获取e.target.value作为最新的输入内容，更新到formValues：

const handleChange = (e, inputType, isFabIcon, iconColor, imagePath) => {
  const newValue = e.target.value;
  setFormValues(prev => ({
    ...prev,
    [inputType]: {
      inputType: inputType,
      inputData: newValue,
      isFabIcon: isFabIcon,
      iconColor: iconColor,
      imagePath: imagePath,
    },
  }));
};

5. （可选）优化状态更新 #

用函数式更新setFormValues(prev => ...)可以避免闭包导致的旧状态问题，确保每次更新都基于最新状态。

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