按键删除项目，Firebase React Native答案

【问题标题】：Delete Item by Key, Firebase React Native按键删除项目，Firebase React Native
【发布时间】：2018-11-22 18:55:57
【问题描述】：

我有一个简单的 Notes React Native 应用程序，我可以向它添加和获取数据，但我不确定如何删除/更新数据。主要问题在于获取我告诉firebase要删除哪些数据的部分。如何将 firebase 密钥传递给以密钥为参数的“删除”函数并将其从 firebase 中删除。我是 React Native 的绝对初学者，我的代码如下：

export default class App extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    all_notitas: [],
    notita_text: ''
  };
};

componentWillMount() {
  const notitasRef = firebase.database().ref('notitas');
  this.listenForNotitas(notitasRef);
};

listenForNotitas = (notitasRef) => {
  notitasRef.on('value', (dataSnapshot) => {
    var aux = [];
    dataSnapshot.forEach((child) => {
      aux.push({
        date: child.val().date,
        notita: child.val().notita
      });
    });
    this.setState({all_notitas: aux});
  });
};  // listenForNotitas

render() {
  let show_notitas = this.state.all_notitas.map((val, key) => {
    return (
      <Notita
        key={key}
        keyval={key}
        val={val}
        eventDeleteNotita={()=>this.deleteNotita(key)}> // I THINK THIS IS THE PROBLEM
      </Notita>
    );
  });

  return (
    <View style={styles.container}>

      <View style={styles.header}>
        <Text style={styles.headerText}>NOTITAS</Text>
      </View>

      <ScrollView style={styles.scrollContainer}>
        {show_notitas}
      </ScrollView>

      <View style={styles.footer}>
        <TouchableOpacity
          style={styles.addButton}
          onPress={this.addNotita.bind(this)}>
          <Text style={styles.addButtonText}>+</Text>
        </TouchableOpacity>

        <TextInput
          style={styles.textInput}
          placeholder='>>> Escribir notita'
          placeholderTextColor='white'
          underlineColorAndroid='transparent'
          onChangeText={(notita_text) => (this.setState({notita_text}))}
          value={this.state.notita_text}>

        </TextInput>
      </View>

    </View>
  );
}

addNotita() {
  if (this.state.notita_text) {
    var d = new Date();
    dataForPush = {
      'date': d.getDate() + '-' +  d.getMonth() + '-' + d.getFullYear(),
      'notita': this.state.notita_text
    };
    firebase.database().ref('notitas').push(dataForPush);
    this.state.all_notitas.push(dataForPush);
    this.setState(
      {
        all_notitas: this.state.all_notitas,
        notita_text: '',  // Limpiar input
      }
    )
  }  // end if
}  // addNotita

当我执行“console.log(key)”时，它会返回一个类似 0、1、2 等的 int。例如，它应该返回一个类似“-LRtghw8CjMsftSAXMUg”的 Firebase 密钥。我不知道我做错了什么以及如何解决它。

deleteNotita(key) {
  firebase.database().ref('notitas').child('' + key).remove()

  /*
  let updates = {};
  console.log(key);
  console.log(updates['/notitas/' + key]);
  updates['/notitas/' + key] = null;
  firebase.database().ref().update(updates); */

  this.state.all_notitas.splice(key, 1);
  this.setState({all_notitas: this.state.all_notitas});
} // deleteNotita

}

【问题讨论】：

标签： javascript firebase react-native firebase-realtime-database

【解决方案1】：

当您将注释添加到 aux 时，您会从 Firebase 中删除密钥。解决方案是将 Firebase 的密钥也保留在其中：

notitasRef.on('value', (dataSnapshot) => {
  var aux = [];
  dataSnapshot.forEach((child) => {
    aux.push({
      date: child.val().date,
      notita: child.val().notita,
      id: child.key
    });
  });
  this.setState({all_notitas: aux});
}

然后将该值传递给deleteNotita：

this.deleteNotita(val.id)

【讨论】：

刚刚试了一下，效果很好。我感觉很笨，谢谢。