Question

我需要更新Firebase中“详细信息列表”中所选项目的“状态”字段。选择项目后，会出现一个弹出窗口，用户可以选择“已完成？”或'失败？'。代码运行'goalComplete'和'goalFailed'函数时会发生错误，因为Firebase引用无法连接正确的路径。 'onRenderItem'函数在'item.key'上打印正确的键。

错误是“无法读取未定义的'key'属性”，当'goalComplete'或'goalFailed'运行时会发生。

使用.push函数将“目标”和“状态”字段放入Firebase中，该函数会生成我尝试在Firebase路径中引用的密钥，每个级别高于“目标”和“状态”项目

我非常感谢你对此的帮助。

import React, { Component } from 'react';
import { Text, FlatList, View, Image, TouchableOpacity, Alert } from 'react-native';
import firebase from 'firebase';
import { Button, Card, CardSection } from '../common';
import styles from '../Styles';

class List extends Component {

    static navigationOptions = {
        title: 'List',
    }

    constructor(props) {
        super(props);

        this.state = {
            goallist: '',
            loading: false,
    };
  }

componentDidMount() {
    this.setState({ loading: true });
    const { currentUser } = firebase.auth();
    const keyParent = firebase.database().ref(`/users/${currentUser.uid}/goalProfile`);
    keyParent.on(('child_added'), snapshot => {
      const newChild = {
           key: snapshot.key,
           goal: snapshot.val().goal,
           status: snapshot.val().status
        };
        this.setState((prevState) => ({ goallist: [...prevState.goallist, newChild] }));
        console.log(this.state.goallist);
        });

this.setState({ loading: false });
}

onRenderItem = ({ item }) => (
    <TouchableOpacity onPress={this.showAlert}>
        <Text style={styles.listStyle}>
             { item.goal } { item.key }
        </Text>
    </TouchableOpacity>
);

goalComplete = ({ item }) => {
    const { currentUser } = firebase.auth();

 firebase.database().ref(`/users/${currentUser.uid}/goalProfile/${item.key}`).update({
        status: 'Done'
    });//this is not updating status in Firebase for the item selected (get 'key is undefined)'
}

goalFailed = ({ item }) => {
    const { currentUser } = firebase.auth();
    firebase.database().ref(`/users/${currentUser.uid}/goalProfile/${item.key}`).update({
        status: 'Fail'
    });//this is not updating status in Firebase for the item selected (get 'key is undefined)'
}

showAlert = () => {
    Alert.alert(
        'Did you succeed or fail?',
        'Update your status',
   [
        { text: 'Completed?',
            onPress: this.goalComplete
        },
        { text: 'Failed?',
            onPress: this.goalFailed
        },
        { text: 'Cancel',
            onPress: () => console.log('Cancel Pressed'),
            style: 'cancel' },
   ],
       { cancelable: false }
   );
}

keyExtractor = (item) => item.key;

render() {
  return (
    <Card>

      <View style={{ flex: 1 }}>
       <FlatList
          data={this.state.goallist}
          keyExtractor={this.keyExtractor}
          extraData={this.state}
          renderItem={this.onRenderItem}
        />
      </View>

    </Card>
    );
  }
}

export { List };

Answer 1

您没有将item传递给任何函数调用，因此它将参数解释为未定义，因此您的问题。您需要通过逻辑传递项目，以便可以访问正确的firebase路径。您也可以使用state变量，但这是另一个故事

位置1

onRenderItem = (item) => (
<TouchableOpacity onPress={() => {this.showAlert(item)}}>
...

位置2

showAlert = (item) => {
Alert.alert(...

位置3

{ text: 'Completed?',
        onPress: () => this.goalComplete(item)
    },
    { text: 'Failed?',
        onPress: () => this.goalFailed(item)
    },

另请注意，您的方法的参数不需要包含在{}

中

编辑：你的TouchableOpacity不需要括号中的项目，所以它现在看起来像这样：<TouchableOpacity onPress={() => {this.showAlert(item)}}>

在位置3，你需要做同样的事情。您需要传递对要调用的函数onPress的引用，当前您执行此操作的方法会立即调用它。

使用React Native从Firebase中的Flatlist更新所选项目

1 个答案: