React Native中如何更新数组内对象的嵌套read值？

你的问题核心是handleAddedFields函数错误地破坏了addedField数组的结构，把原本的对象数组改成了包含数组元素和独立read属性的混合对象，导致提交时每个字段的read值没有正确嵌套到对应的{field, read}对象里。下面是具体的修复步骤和代码示例：

1. 正确添加新字段到数组 #

选择类型后，要保证往数组里追加标准的{field: 选中类型, read: null}对象，不要修改数组的整体结构：

// 选择类型后添加字段的处理函数
const handleAddField = (selectedType) => {
  setAddedFields(prevFields => [...prevFields, { field: selectedType, read: null }]);
};

2. 正确更新对应字段的read值 #

修改handleAddedFields，通过索引定位数组中的目标对象，只更新该对象的read属性，保持数组结构不变：

// 更新指定字段的输入值
const handleAddedFields = (index, inputValue) => {
  setAddedFields(prevFields => {
    // 复制原数组，避免直接修改状态
    const updatedFields = [...prevFields];
    // 替换对应索引的对象，只更新read属性
    updatedFields[index] = { ...updatedFields[index], read: inputValue };
    return updatedFields;
  });
};

3. 正确渲染字段对应的TextInput #

遍历addedFields数组，每个元素对应一个输入框，绑定对应的更新函数：

{addedFields.map((fieldItem, index) => (
  <View key={index} style={{ marginVertical: 10 }}>
    <Text style={{ fontSize: 16, marginBottom: 4 }}>{fieldItem.field}</Text>
    <TextInput
      value={fieldItem.read || ''}
      onChangeText={(text) => handleAddedFields(index, text)}
      placeholder={`请输入${fieldItem.field}内容`}
      style={{ borderWidth: 1, borderColor: '#ccc', padding: 10, borderRadius: 6 }}
    />
  </View>
))}

4. 提交时的格式验证 #

提交前确认数组结构正确，每个元素都是{field, read}格式的对象，再发送请求：

const handleSubmit = async () => {
  // 检查所有字段是否已填写
  const isAllFilled = addedFields.every(item => item.read !== null && item.read.trim() !== '');
  if (!isAllFilled) {
    Alert.alert('提示', '请填写所有字段的内容');
    return;
  }

  // 提交到服务器，此时addedFields是正确的数组格式
  try {
    await fetch('你的服务器接口地址', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ addedFields }),
    });
    Alert.alert('成功', '表单提交完成');
  } catch (err) {
    Alert.alert('错误', '提交失败，请重试');
  }
};

错误原因说明 #

之前的handleAddedFields应该是错误地使用了类似setAddedFields(prev => ({ ...prev, read: value }))的写法，这会把数组转换成对象——数组的索引变成对象的键，同时额外添加一个独立的read属性，完全破坏了预期的数组结构，导致服务器收到的数据格式异常。

内容的提问来源于stack exchange，提问作者VCS-Jacob