使用 React Native 从 Firebase 中的平面列表更新所选项目

Question

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

错误是"无法读取未定义的'键'的属性"，当"目标完成"或"目标失败"运行时发生。

"

目标"和"状态"字段是使用 .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 onPress={() => {this.showAlert(item)}}>

在位置 3 中，您需要做同样的事情。您需要传递对要调用的函数的引用 onPress ，您当前的工作方式会立即调用它。