React Native Alert：平面列表中的项目之间的比较答案

【问题标题】：React Native Alert : comparison between items in flatlistReact Native Alert：平面列表中的项目之间的比较
【发布时间】：2021-09-21 07:18:20
【问题描述】：

我目前正在做一个项目，我可以在一个平面列表中插入项目考试，每个项目都有自己的 id 、 mark 和 grade 。我希望程序在我在平面列表中添加新考试后输出警报，如果新考试的分数低于以前的分数，它会提醒说“你当前的分数低于以前的考试”

这是我期望的例子：第一项是期中考试（90分，A级）。然后我添加期末考试（70分，B级）。按添加按钮后，它会提示“您当前的分数低于以前的考试”。

这是我在平面列表中的项目的代码：

const ListItem = ({exam}) => {

        return <View style={ styles.listItem }>
          <View style={styles.subject}>
            <View>
              <Text style={[styles.examText , {fontSize: 18}]}>
            {exam?.Term}
              </Text>
            </View>
            <View style={styles.subjectMarkGrade}>
              <Text style={[styles.examText , {width: '50%'}]}>
              Mark: {exam?.Mark} ( {exam?.Grade} )
              </Text>
            </View>

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

return (
<View style={{flex:1}}>
                <View style={styles.ExamWrapper}>
                    <FlatList
                        showsVerticalScrollIndicator={false}
                        contentContainerStyle={{ padding: 10 , paddingBottom: 100}}
                        data={exam}
                        keyExtractor = { (item) => item.id.toString() }
                        renderItem={({ item }) => <ListItem exam={item}/>}
                    />
                </View>
            </View>
            <View style={styles.typeMsgContainer}>
            <View style={{flexDirection: 'row'}}>
            <TextInput
                style={[styles.typeMsgBox , {width: '50%' , borderBottomWidth: 0 , borderTopLeftRadius: 30,}]}
                placeholder={'Add Exam Term...'}
                value={termInput}
                onChangeText={(text) => setTermInput(text)}
            />
            <TextInput
                style={[styles.typeMsgBox , {width: '25%' , borderBottomWidth: 0 , borderTopLeftRadius: 0}]}
                placeholder={'Add Marks'}
                keyboardType= "numeric"
                value={markInput}
                onChangeText={(text) => setMarkInput(text)}
            />
            <TextInput
                style={[styles.typeMsgBox , {width: '25%' , borderBottomWidth: 0 , borderTopLeftRadius: 0 , borderTopRightRadius: 10,}]}
                placeholder={'Add Grades'}
                value={gradeInput}
                onChangeText={(text) => setGradeInput(text)}
            />
            </View>
            <View style={{backgroundColor: '#fff' , borderColor: '#4169E1' , borderWidth: 1 , borderTopWidth:0, borderBottomRightRadius: 10,}}>
            <TouchableOpacity style={styles.sendBtn} onPress={addExam}>
            <View >
                <Icon name="add" size={30} color="white"/>
            </View>
            </TouchableOpacity>
            </View>
            </View>
);

这是 addExam() ：

const addExam = (subject) => {
        if (termInput === '' || markInput === '' || gradeInput === ''){
          Alert.alert('Error', 'Please fill in all box');
        } else {
          const newExam = {
            id: Math.random().toString(),
            Term: termInput,
            Mark: markInput,
            Grade: gradeInput,
          };
          setExam([...exam,newExam]);
          setTermInput('');
          setMarkInput('');
          setGradeInput('');
        }
      };

【问题讨论】：

标签： reactjs react-native react-hooks react-native-android react-native-flatlist

【解决方案1】：

在您的 addExam 函数中，您可以获取列表中的最后一项并与正在添加的新项目进行比较。

const addExam = (newExamItem) => {
  const prevExam = // get the last item in your list. you can keep your list of items in a state
  if (newExamItem.mark < prevExam.mark){
    Alert.alert('Error', 'Your current mark is lower than previous exam');
  }
}

【讨论】：