Question

我实际上在我的第一个React Project中工作了一个小小的启动，一个“搜索并添加到您的收藏集”应用程序。对于搜索功能，我使用Algolia的React Instant Search。一切正常。

现在，对于“添加到集合”功能，我知道该怎么做，但是我无法恢复函数中的数据。我做了这样的小测试：

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, RefinementList} from "react-instantsearch/dom";
import { orderBy } from "lodash";


function addToCollection({hit}) {
  console.log('-----');
  console.log('The selected item is:', hit);
  console.log('------');
}

const Hit = ({hit}) =>
  <div className="hit">
    <div className="hit-image">
      <img src={hit.avatarURL} height={150} width={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-reference">
        {hit.reference}
      </div>
      <div className="hit-cote">
        {hit.cote}
      </div>
      <button className="btn btn-success" onClick={addToCollection}>Ajouter à ma collection</button>
    </div>
  </div>

const Content = () =>
  <div className="content container-fluid text-center">
    <div className="row">
      <div className="col-lg">
        <Hits hitComponent={Hit} key ={Hit}/>
      </div>
    </div>
  </div>

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


  }

  render(){

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

    }

      return (
        <div class="container-fluid">
          <h1 className="text-center">Catalogue de capsule</h1>
          <h4 className="text-center">Rechercher une capsule</h4>
          <InstantSearch
            apiKey="a8de2c61b98e1ca62a5df03f1970f46a"
            appId="7H3CTF406R"
            indexName="catalogue">


            <SearchBox translation={{placeholder:'Rechercher une capsule'}} width="500 px"/>



            <Content />    


          </InstantSearch>

        </div>
      );
  }
}

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

export default withAuthorization(authCondition)(Catalogue);

因此，当我单击按钮时，如何将我的常量“命中”的信息传输到函数“ addToCollection”。

预先感谢您的帮助

Answer 1

<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-reference"> {hit.reference} </div>
    <div className="hit-cote"> {hit.cote} 
</div>

如何访问hit.cote和hit.avatarurl？

React Instant Search恢复功能中的正确数据

1 个答案: