Question

我正在尝试通过RN应用中的firebase更新复选框的值（我正在使用nativebase复选框组件）。复选框的值是从数据库中正确检索到的，但是更新这些值似乎不起作用。

这是代码：

const onButtonPress = (checkList, course) => {
    const { currentUser } = firebase.auth();

    firebase.database().ref(`/users/${currentUser.uid}/Year1/${course}`)
         .set({
                 checked: !checkList.Year1[course].checked
               });
};

，这里叫它：

<CheckBox
   checked={checkList.Year1[course].checked}
   onPress={onButtonPress(checkList, course)}
 />

Here is the firebase database scheme

firebase中的数据从redux中恢复为状态，并映射到prop'checkList'。我将checklist的所有值初始化为false，直到从firebase提取数据的请求完成为止（因此checkbox的值永远不会为null以避免收到错误），因此onPress只会卡在一个循环中，因为该值不断更改（首先将所有值都设置为false，然后再初始化数据）。我理解该问题，但是在尝试解决该问题时遇到了麻烦。我最初的想法是onPress仅在用户实际按下复选框时才调用，而不是在更新值时调用，因此如何更改它，以便仅在用户按下复选框时才调用onPress。还是还有其他方法可以解决？我尝试使用其他可用的复选框组件，但所有这些组件都面临相同的问题。有什么想法吗？

这是组件的完整代码（删除了样式，没有删除）：

import React, { Component } from 'react';
import { Image, Text, View, ScrollView } from 'react-native';
import { connect } from 'react-redux';
import { List, ListItem, Right, Body, CheckBox } from 'native-base';
import firebase from 'firebase';
import Gradlist from '../Components/Gradlist';
import { courseFetch } from '../Actions/CourseActions';


const isEmpty = (obj) => {
  for (const prop in obj) {
   return false;
 }
 return true;
};

const onButtonPress = (checkList, course) => {
    const { currentUser } = firebase.auth();

    firebase.database().ref(`/users/${currentUser.uid}/Year1/${course}`)
         .set({
                 checked: !checkList.Year1[course].checked
               });
};

class Gradscreen extends Component {

  componentWillMount() {
    this.props.courseFetch();
  }


  render() {
    const { Year1, Year2, Year3, Year4 } = this.props.courses;
    let { checkList } = this.props;
    if (isEmpty(checkList)) {
        checkList = {
          Year1: {
            'COMM 101': {
          checked: false,
          grade: ''
        },
        'COMM 292': {
          checked: false,
          grade: '',
        },
        'CPSC 110': {
          checked: false,
          grade: ''
        },
        'CPSC 121': {
          checked: false,
          grade: ''
        },
        'ECON 101': {
          checked: false,
          grade: '',
        },
        'ECON 102': {
          checked: false,
          grade: '',
        },
        'ENGL 112': {
          checked: false,
          grade: '',
        },
        'MATH 104': {
          checked: false,
          grade: ''
        },
        'MATH 105': {
          checked: false,
          grade: '',
        }
      } };
    }


    return (
          <View>
            <ScrollView>
                  <Image
                        style={styles.pictureStyle}
                        source={require('../assets/bucsHeader.png')}
                  />
                  <Gradlist Header={'Year 1'}>
                    <List>
                       { Year1.map((course, i) => (
                         <ListItem icon key={i}>
                            <Body>
                              <Text> {course} </Text>
                            </Body>
                            <Right>
                              <CheckBox
                              checked={checkList.Year1[course].checked}
                              onPress={onButtonPress(checkList, course)}
                              />
                            </Right>
                         </ListItem>))
                     }
                    </List>
                  </Gradlist>
                </ScrollView>
            </View>
    );
  }
}

const mapStateToProps = state => ({
  courses: state.courses,
  checkList: state.checkList
});

export default connect(mapStateToProps, { courseFetch })(Gradscreen);

Answer 1

每次调用渲染函数时，您都在调用onButtonPress函数。您需要通过onPress prop进行回调

要使Checkbox的onPress属性正确执行，请更改为以下

<Checkbox 
    checked={checkList.Year1[course].checked}
    onPress{() => onButtonPress(checkList, course)}
/>

通过Firebase更新React Native复选框的值

1 个答案: