如何在 React 中制作附加到数据库的列表

如何解决如何在 React 中制作附加到数据库的列表

我正在为大学准备一个小项目，我需要帮助。 该项目是一款适用于电晕可访问高中学生的应用程序。 作为应用程序的一部分，我可以选择成为“教师用户”，我需要为学生输入成绩。 这就是问题所在。 当我转到“输入成绩”页面时，我会得到一个包含在数据库中的所有学生姓名（目前正在向教师检查）的列表，当我点击其中一个时，我可以更改他们的成绩。

我可以获取 Checkbox 中所有用户的列表，但我无法让 Checkbox 将它们显示为选中或未选中。 （我使用 Firebase）。

我已经用控制台日志进行了测试以检查值，一切看起来都很好

class EnterGrades extends React.Component {
state= {
    students: null,isLoaded: false,checked: false
}

getStudentsOnQeueu = async () => {
    let students = await this.studentsRef.orderByChild("fullname")
    return students
  }
componentDidMount(){
    console.log('mounted')
    db.collection('Teacher').get().then( snapshot =>{
        const students = []
        snapshot.forEach( doc =>{
            KEY = Object.keys(doc.data());
            console.log("KEYS is :"+KEY);
            KEY.forEach( (key_id) => {
                if(key_id=='fullname'){
                    const data = doc.data()
                    console.log(data)
                    students.push(data)
                    console.log('name is:'+doc.data().fullname)
                }
                else{

                }
            })
        })
        this.setState({ students: students})
        this.setState({isLoaded:true})
        getStudentsOnQeueu();
    })
    .catch( error => Alert.alert('Error',error))
}
renderStudentList(){
    if(this.state.isLoaded!=false)
    return this.state.students.map((item,key)=> {
        return(
            <TouchableOpacity style={{flexDirection: "row",alignItems: "center" }} key={key} onPress={()=> {this.value=!this.value}}>
                <CheckBox value={false}/>
                <Text style={{fontWeight:"bold"}}>{item.fullname}</Text>
            </TouchableOpacity>
        )
    })
}

onChecked(id){
    const data = this.state.students
    const index = data.findIndex(x => x.id === id);
    console.log('id is '+ id)
    console.log('index is '+index)
    const isInList = false;
    const checked = []
    if(checked.length > 0){
        console.log('checked length wasnt 0')
        for(let i=0;i<checked.length;i++){
            if(checked[i]==data[index])
                isInList = true;
        }
        if(isInList== false)
            checked.push(data[index]);
    }
    else{
        console.log('checked length was 0')
        console.log('data is' + data[index])
        checked.push(data[index]);
    }
    this.setState({ checked: checked})
    
}

render(){
    if(this.state.isLoaded!=false){
    return (
        <View style={styles.InputContainer}>
            <Text>Enter Grades</Text>
            <FlatList 
            data = {this.state.students}
            renderItem ={({item}) =>
            <Text>
                {`Student name: ${item.fullname}\n`}
                {`Email is: ${item.email}`}
            </Text>
            }
            />
            <RadioForm
                radio_props={this.dataList}
                
                onPress={(value) => {this.setState({value:value})}}
            />
        {this.renderStudentList()}
        <Button
                title="Update Students "
                onPress={() => {
                {this.getSelectedStudents}}
                }
            />
        </View>
    )
    }
}

每个老师都有 uid、email、checked(false/true) 等