如何在 React Firebase 应用程序中切换按钮

Question

我使用 Firebase 数据库创建了一个 React 应用程序，应用程序的概念是“添加到收藏夹”。更准确地说，用户可以在搜索栏中搜索一个项目，并通过单击“添加到集合”按钮将每个结果添加到他的集合中。如果他愿意，用户可以通过单击“删除到收藏”按钮从他的收藏中删除一个项目。一切正常！

一切正常，但如果用户已经在他的收藏中拥有该项目，我希望“添加到收藏”按钮消失，那就是要显示的“删除”按钮。反之亦然。

有人有想法吗？我尝试这样做两天，但没有结果。

这是我的代码：

function addToCollection(hit) {
  const userUid = firebase.auth().currentUser.uid;
  const item = hit
  const ref = hit.objectID 

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

}

function removeToCollection (hit){
  const userUid = firebase.auth().currentUser.uid;
  const ref = hit.objectID 

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


const Hit = ({hit}) =>
    <div className="item">
        <img src={hit.avatarURL} width={150} height={150}></img>
        <h1 className="marque">{hit.marque}</h1>
        <h3 className="numero">{hit.numero}</h3>
        <h4 className="reference">{hit.reference}</h4>
        <h4 className="marquesuite">{hit.marquesuite}</h4>
        <p className="cote">{hit.cote}</p>
        <button className="btn btn-success" onClick={() => addToCollection(hit)}>Add to Collection</button>
        <button className="btn btn-danger" onClick={() => removeToCollection(hit)}>Remove to Collection</button>
    </div>



const Content = () =>
  <div className="text-center">
    <Hits hitComponent={Hit}/>

  </div>






class Catalogue extends React.Component {
  constructor(props){
    super(props);
    this.state = { favorited: this.props.isFavorite };
  }


  render(){

    if(this.state.catalogue === null) {
      return  <p>Le catalogue est vide</p>

    }

      return (
        <div class="container-fluid text-center">
          <h1 className="text-center">Catalogue de capsule</h1>


          <InstantSearch
            apiKey="b91d4104964a4a28c5f99e41484b09ec"
            appId="ZHUPJYFJTW"
            indexName="catalogue">


            <SearchBox translations={{placeholder:'Rechercher une capsule'}}/>



            <Content />  



          </InstantSearch>

        </div> 

      );
  }
}

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

export default withAuthorization(authCondition)(Catalogue);

提前感谢您的帮助。

Answer 1

const Hit = ({hit}) =>{
    let itemExists = fasle;
    const itemRef= new Firebase(`users/${userUid}/collection`)
    itemRef.child(hit.objectID).once('value', (snapshot) => {
     itemExists = (snapshot.val() !== null);
     });
    return (<div className="item">
             /*other tags*/
         {itemExists ?
            <button className="btn btn-danger" onClick={() => removeToCollection(hit)}>Remove to Collection</button> : 
            <button className="btn btn-success" onClick={() => addToCollection(hit)}>Add to Collection</button>
          }
    </div>)}