React Native编辑FlatList后列表无变化，新输入值无法覆盖原有数据

问题原因&修复方案 #

1. 输入框绑定错误，导致状态存为数组 #

你控制台打印的科目对象里NewMark、NewGrade是[""]数组格式，但新增科目时这两个字段的初始值是空字符串，说明你给编辑输入框绑定onChangeText时写法有误，把字符串值套成了数组存进状态。
修复：检查编辑输入框的配置，确保是直接存字符串：

<TextInput
  value={newMarkInput}
  onChangeText={text => setNewMarkInput(text)}
  placeholder="输入新分数"
/>
<TextInput
  value={newGradeInput}
  onChangeText={text => setNewGradeInput(text)}
  placeholder="输入新等级"
/>

不要写成onChangeText={text => setNewMarkInput([text])}这种套数组的写法。

2. 状态重置逻辑位置错误 #

你当前的updateSubject函数里，清空newMarkInput、newGradeInput的代码写在了if-else判断的外面，不管有没有更新成功都会执行清空，甚至弹错误提示的时候也会把用户已经输入的内容清掉。
修复：把重置逻辑移到else代码块内部，只有更新成功才执行重置，同时如果你要直接覆盖原有分数和等级，直接修改Mark、Grade字段即可：

const updateSubject = (subjectId) => {
    if (newMarkInput === '' || newGradeInput === ''){
      Alert.alert('错误', '请填写所有内容');
    } else {
      const newSubjects = subjects.map(item => {
        if (item.id === subjectId) {
          return {
            ...item,
            Selected: false,
            Mark: newMarkInput,
            Grade: newGradeInput.toUpperCase()
          };
        }
        return item;
      });
      setSubjects(newSubjects);
      console.log(newMarkInput, newGradeInput, newSubjects);
      // 重置逻辑移到这里
      setNewMarkInput('');
      setNewGradeInput('');
      setShowInputBox(false);
    }
};

3. 字段更新不符合需求 #

你原本的需求是新输入值覆盖原有的分数和等级，但之前的代码是把值存在了NewMark、NewGrade两个额外字段里，没有修改原有的Mark、Grade字段，所以FlatList渲染的时候还是显示旧值。如果需要同时保留新旧值，你可以保留这两个字段，同时修改FlatList的渲染逻辑展示你需要的内容即可。

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

React的状态更新是异步的，频繁更新列表的场景下直接用当前作用域的subjects可能拿到旧值，建议改为函数式更新，确保拿到最新的列表状态：

setSubjects(prevSubjects => 
  prevSubjects.map(item => {
    if (item.id === subjectId) {
      return {
        ...item,
        Selected: false,
        Mark: newMarkInput,
        Grade: newGradeInput.toUpperCase()
      };
    }
    return item;
  })
)

关于extraData的说明 #

你当前给FlatList传的extraData={subjects}是正确的，因为列表数据源就是subjects，数据变更的时候FlatList会自动触发刷新，不需要额外调整。

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