Как добавить функцию в const с ReactJs - PullRequest
Новая
       7

Как добавить функцию в const с ReactJs

0 голосов
/ 08 ноября 2018

В настоящее время я работаю над своим первым приложением React с внутренним интерфейсом Firebase, и я встроил панель поиска, предоставленную Algolia. Все работает нормально, но я бы хотел добавить кнопку «добавить в мою коллекцию» на каждый элемент, чтобы пользователь мог добавить элемент в свою личную коллекцию.

Мне удалось сделать это, когда я работал исключительно через Firebase, но в моей поисковой системе мои данные поступают из Алголии, которая сама получает данные от Firebase, поэтому я немного растерялся.

После обучения по интеграции Algolia в React у меня был следующий код: 

import React  from 'react';
import withAuthorization from './withAuthorization';
import * as firebase from 'firebase';
import {database, } from '../firebase/firebase';
import Image from 'react-image-resizer';
import {
  InstantSearch,
  SearchBox,
  Hits,
  Highlight
} from 'react-instantsearch/dom';


const Hit = ({hit}) => 

  <div className="hit">
    <div className="hit-image">
      <img src={hit.avatarURL} height={150} with={150}/>
    </div>
    <div className="hit-content">
      <div className="hit-marque">
        {hit.marque}
      </div>
      <div className="hit-numero">
        {hit.numero}
      </div>
      <div className="hit-marquesuite">
        {hit.marquesuite}
      </div>
      <div className="hit-cote">
        {hit.cote}
      </div>
      <div className="hit-collection">
      <button className="btn btn-success">Ajouter à ma collection</button>
      </div>

    </div>
  </div>



const Sidebar = () =>
  <div className="sidebar">


  </div>

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

  </div>



class Catalogue extends React.Component {
  constructor(){
    super();
    this.state = {
      catalogue: {},
    };


  }




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

    });
  });

  const capsRef = firebase.database().ref(`catalogue`).orderByChild(`marque`);

    capsRef.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 ({
        catalogue: newState
      });
    });
  }




  // Add item to user collection
    addToCollection(key, e) {
      const userUid = firebase.auth().currentUser.uid;
      const collection = {
        marque: this.state.catalogue[key].marque,
        marquesuite: this.state.catalogue[key].marquesuite,
        numero: this.state.catalogue[key].numero,
        reference: this.state.catalogue[key].reference,
        cote: this.state.catalogue[key].cote,
        avatarURL:this.state.catalogue[key].avatarURL
      };
      firebase.database().ref(`users/${userUid}/collection`).child('items').ref.push(collection);


  }




  render(){

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

    }


    const catalogue= Object.keys(this.state.catalogue).map(key => {
      return (

        <div className="item col-md-2" key={key}>
          <img src={this.state.catalogue[key].avatarURL} height={150} with={150}/>
          <h3>{this.state.catalogue[key].marque}</h3>
          <h3>{this.state.catalogue[key].numero}</h3>
          <h4>{this.state.catalogue[key].marquesuite}</h4>
          <h4>{this.state.catalogue[key].reference}</h4>
          <p>{this.state.catalogue[key].cote}</p>
          <div className="text-center">
          <button className="btn btn-success" onClick={this.addToCollection.bind(this, key)}>Ajouter à ma collection</button>
          </div>
        </div>

          )
        });

      return (
        <div class="container-fluid">
          <h1 class="text-center">Catalogue de capsule</h1>
          <InstantSearch
            apiKey="MyApiKey"
            appId="MyAppId"
            indexName="catalogue">

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

            <main>
              <Content/>


            </main>


          </InstantSearch>

        </div>
      )
  }
}

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

export default withAuthorization(authCondition)(Catalogue);

Я должен признать, что это смесь до и после интеграции Алголии.

Но с этим кодом моя функция AddToCollection не работает, и у меня появляется сообщение об ошибке. Как я могу заставить мою функцию AddToCollection работать в моем const Hit?

Заранее благодарю за помощь

1 Ответ

0 голосов
/ 08 ноября 2018

Простите, если я что-то упустил, но разве многострочным стрелочным функциям не нужно явное выражение return и они заключены в фигурные скобки?

Так, например: 

const Hit = ({hit}) => {
  return (
    //insert JSX expression here
  )
}
...