刪除在反應和firebase中不起作用

Question

我創建了一個應用程序，用戶數據在前端使用reactjs並且使用firebase作爲後端註冊。我可以將數據保存到Firebase。我可以編輯和刪除數據，但無法將編輯的數據保存到firebase，而且我的deleteUser事件也不會刪除已刪除的節點。可能是什麼原因？

這裏是我的代碼

const userInfo = [ 
     { id:1, name:'',contact:'',address:'',email:'',username:'',password:'' } 
    ]; 

export default class App extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     userInfo:userInfo 
     } 
    this.userRef = new Firebase('https://***.firebaseio.com/users/'); 
    this.createUser = this.createUser.bind(this); 
    this.saveUser = this.saveUser.bind(this); 
    this.deleteUser = this.deleteUser.bind(this); 

    } 

    loadData(){ 
    this.userRef.on('value', snap => { 
     let userInfo = []; 
     snap.forEach(data => { 
     let userData = data.val(); 
     userData.id = data.name(); 
     userInfo.push(userData); 
     }); 
     this.setState({ userInfo }); 
    }); 

    this.userRef.on('child_removed', (dataSnapshot) =>{ 
     delete this.state.userInfo[dataSnapshot.key()]; 
     this.setState({ userInfo: this.state.userInfo }); 
    }); 

    } 

    componentDidMount(){ 
    this.loadData(); 
    } 

    createUser(user){ 
    this.userRef.push(user); 
    } 

    saveUser(oldUser, newUser){ 
    console.log('olduser',oldUser); 
    console.log('newuser', newUser); 
    // TODO - optimize this code 
    const foundUser = _.find(this.state.userInfo, user => 
     user.name === oldUser.name 
    ); 
    const foundContact = _.find(this.state.userInfo, user => 
     user.contact === oldUser.contact 
    ); 
    const foundAddress = _.find(this.state.userInfo, user => 
     user.address === oldUser.address 
    ); 
    foundUser.name = newUser.name; 
    foundContact.contact = newUser.contact; 
    foundAddress.address = newUser.address; 
    } 

    deleteUser(id){ 
    console.log(id); 
    const dltUserRef = new Firebase('https://***.firebaseio.com/users').child(id); 
    console.log('dlt',dltUserRef); 
    dltUserRef.remove(); 
    } 

    render() { 
    return (
     <div> 
     <FormBox createUser = { this.createUser } /> 
     <UsersList 
      userInfo = { this.state.userInfo } 
      saveUser = { this.saveUser } 
      deleteUser = { this.deleteUser } /> 
     </div> 
    ); 
    } 
} 

用戶列表item.js

import React, { Component } from 'react'; 

export default class UserslistItem extends Component { 
    constructor(props){ 
     super(props); 

     this.state = { isEditing: false }; 

     this.onEditClick = this.onEditClick.bind(this); 
     this.onCancelClick = this.onCancelClick.bind(this); 
     this.onSaveClick = this.onSaveClick.bind(this); 
    } 

    onEditClick(){ 
     this.setState({ isEditing: true }); 
    } 

    onCancelClick(){ 
     this.setState({ isEditing: false }); 
    } 

    onSaveClick(event){ 
     event.preventDefault(); 
     const oldUser = [ 
      { 
       name:this.props.name, 
       address:this.props.address, 
       contact:this.props.contact 
      } 
     ]; 
     const newUser = [ 
      { 
       name: this.refs.editName.value, 
       address: this.refs.editAddress.value, 
       contact: this.refs.editContact.value 
      } 
     ]; 
     // console.log('old user is', oldUser); 
     // console.log('new user is', newUser); 
     this.props.saveUser(...oldUser, ...newUser); 
     this.setState({ isEditing: false }); 
    } 


     return(
       <div className = "buttons"> 
        <button className="btn btn-warning" onClick = { this.onEditClick }>Edit</button> 
        <button className="btn btn-danger" onClick = { this.props.deleteUser.bind(this, this.props.id) }>Delete</button> 
       </div> 
      ); 

    } 

    render() { 
     return (
      <div className = "container" > 
       <div className="row"> 
        <div className="col-md-4"> 
         <div className="card card-block"> 
          { this.renderUserSection() } 
          { this.renderActionSection() } 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

刪除現在正在工作。但我怎麼能保存編輯的數據？

Answer 1

嘗試：

this.userRef.on('child_removed', (dataSnapshot) => { 
    delete this.state.userInfo[dataSnapshot.val().id]; 
    this.setState({ userInfo: this.state.userInfo }); 
});