0

我正在尝试为我的项目编辑我的平面列表。当主题添加到平面列表中时，值是通过 subjectInput、markInput 和gradeInput 状态添加的，然后我想使用 newMarkinput 和 newGradeInput 状态编辑该特定主题的标记和等级，我期待 newMarkInput 和 newGradeInput 覆盖当前的 markInput 和 GradeInput 但我当前的结果是 newMarkInput 和 newGradeInput 仍然是一个空数组，尽管输入了 newMarkInput 和 newGradeInput 值。

控制台日志结果：80 A [{"Grade": "A", "Mark": "90", "NewGrade": [""], "NewMark": [""], "Selected": true, "Subject ": "数学", "id": "0.9740256550962071"}]

我尝试在平面列表中添加 ExtraData 但不确定我是否正确使用它

但我怀疑导致这种情况发生的可能是 updateSubject() 但我不确定如何解决它

我的状态

const [subjectInput, setSubjectInput] = useState('');
  const [markInput, setMarkInput] = useState('');
  const [gradeInput, setGradeInput] = useState('');

  const [subjects, setSubjects] = useState([]);

  const [newMarkInput, setNewMarkInput] = useState('');
  const [newGradeInput, setNewGradeInput] = useState('');

我的 addSubject()

const addSubject = () => {
    if (subjectInput === '' || markInput === '' || gradeInput === ''){
      Alert.alert('Error', 'Please input todo');
    } else {
      const newSubject = {
        id: Math.random().toString(),
        Subject: subjectInput,
        Mark: markInput,
        Grade: gradeInput.toUpperCase(),
        Selected: false,
        NewMark: '',
        NewGrade: '',
      };
      setSubjects([...subjects,newSubject]);
      setSubjectInput('');
      setMarkInput('');
      setGradeInput('');
      setNewGradeInput('');
      setNewMarkInput('');
    }
  };

我更新主题项目的功能

const updateSubject = (subjectId) => {
    if (newMarkInput === '' || newGradeInput === ''){
      Alert.alert('Error', 'Please fill in all boxes');
    } else {
    const newSubject = subjects.map(item => {
      if (item.id === subjectId) {
        return {...item,Selected: false, NewMark: newMarkInput, NewGrade: newGradeInput};
      }
      return item;
    }
    );
    setSubjects(newSubject);
    console.log(newMarkInput,newGradeInput, newSubject);
  }
    setNewMarkInput('');
    setNewGradeInput('');
    setShowInputBox(false);
  };

我的单子

<FlatList
          extraData = {subjects}
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{ padding: 10 , paddingBottom: 100}}
          data={subjects}
          keyExtractor = { (item) => item.id.toString() }
          renderItem={({ item }) => {
            return <TouchableOpacity onPress={() => onPressItem(item.id)}>
              <View style={[styles.listItem , {backgroundColor: item?.Selected ? '#cc66ff' : '#fff'}]}>
              <View style={styles.subject}>
                <View>
                  <Text style={[styles.examText , {fontSize: 18}]}>
                {item?.Subject}
                  </Text>
                </View>
                <View style={styles.subjectMarkGrade}>
                  <Text style={[styles.examText , {width: '50%'}]}>
                  Mark:{item?.Mark} ( {item?.Grade} )
                  </Text>
                  <Text style={[styles.examText , {width: '50%'}]}>
                  Target: <Target/>
                </Text>
                </View>

              </View>
              <View style={{ justifyContent: 'center'}}>
                <TouchableOpacity style={[styles.delete ]} onPress={() => deleteSubject(item?.id)}>
                  <Icon name="remove" size={15} color={'#fff'} />
                </TouchableOpacity>
              </View>
            </View>
            </TouchableOpacity>;
4

0 回答 0