当我在React / Firebase App中单击我的按钮时没有任何反应

Question

我的应用程序上有一个“添加到收藏夹”系统，每个用户都可以在一个名为“我的收藏”的私人列表中保存项目。 一切工作正常，直到我想按字母顺序添加排名。

用户的每个“收藏夹项目”都按字母顺序在页面上可见，但是当我单击“删除按钮”时，没有任何反应。 我不太明白问题可能出在哪里。

这是我的代码（我使用React和Firebase）：

import React from 'react';
import AuthUserContext from './AuthUserContext';
import withAuthorization from './withAuthorization';
import * as firebase from 'firebase';
import { config, database, db, auth, itembase, } from '../firebase/firebase';
import Image from 'react-image-resizer';
import _ from 'lodash';



class Collection extends React.Component {
constructor (props) {
  super(props)
  this.state = {
    collection: {}
  };

}




//Data from Firebase Database
componentDidMount() {
  database.once('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      var childKey = childSnapshot.key;
      var childData = childSnapshot.val();

    });
  });

  const userUid = firebase.auth().currentUser.uid;
  const userRef = firebase.database().ref(`users/${userUid}/collection/items`).orderByChild(`marque`);

    userRef.on('value', (snapshot) => {
      let newState = [];

      snapshot.forEach(function(childSnapshot) {
        newState.push({
          id: childSnapshot.key,
          marque: childSnapshot.val().marque,
          marquesuite: childSnapshot.val().marquesuite,
          numero: childSnapshot.val().numero,
          reference: childSnapshot.val().reference,
          cote: childSnapshot.val().cote,
          avatar: childSnapshot.val().avatar,
          avatarURL: childSnapshot.val().avatarURL,

        });
      });

      this.setState ({
        collection: newState
      });
    });
  }

//Remove from user collection
removeToCollection(key, e) {
  const userUid = firebase.auth().currentUser.uid;
  const item = key;

  firebase.database().ref(`users/${userUid}/collection/items/${item}`).remove();
 }

 renderPosts() {
 this.removeToCollection = this.removeToCollection.bind(this);
 return _.map(this.state.collection, (collection, key) => {
   return (
     <div className="item col-md-3" key={key} id={key}>
         <img src={this.state.collection[key].avatarURL} height={150} with={150}/>
         <h3>{collection.marque}</h3>
         <h3>{collection.numero}</h3>
         <h4>{collection.marquesuite}</h4>
         <h4>{collection.reference}</h4>
         <p>{collection.cote}</p>
         <div className="text-center">
         <button className="btn btn-danger" onClick={(e) => {if(window.confirm('Voulez vous vraiment retirer cette capsule de votre collection ?')){this.removeToCollection(key, e)};}}>Supprimer</button>
         </div>

     </div>
   )
 })
}

render(){
  if(this.state.collection === null){
    return <h2>Votre collection est vide</h2>
  }
    return (
      <div class="container-fluid">
        <h1 class="text-center">Votre collection</h1>
        {this.renderPosts()}
      </div>
    )
 }

}

const authCondition = (authUser) => !!authUser;

export default withAuthorization(authCondition)(Collection);

预先感谢您的帮助 ！

Answer 1

我建议先在构造函数中绑定removeToCollection（），或者先使用箭头函数，但是对于您的问题，请尝试在从数据库中删除时更新状态，而不仅仅是在添加到数据库时进行更新。

编辑：等等，我只是意识到当孩子改变时，.on（）函数会被调用，因此它也应该在删除时也更新状态，这是我的错误。