Ничего не происходит, когда я нажимаю кнопку в приложении React / Firebase

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 () вызывается при изменении потомков, поэтому она должна уже обновлять состояние при удалении, моя ошибка.