Suchleiste, die mit React erstellt wurde, die Firebase abfragt

Question

Relativ neu zu Reagieren und zu versuchen, eine Suchleiste einzubeziehen, die einen Geschäftsknoten in meiner Firebase-Datenbank abfragt. Könnte eine Anleitung/Eingabe für den Fluss meiner Komponenten verwenden.

Mein anfänglicher Instinkt sagte mir, dass es etwas wie 'router> SearchBarLogic> SearchBar> BusinessIndexLogic> BusinessIndex' mit einem Begriff von meiner SearchBar zu meinem BusinessIndexLogic für Hilfe beim Generieren meiner Abfrage gehen sollte.

Ich werde den entsprechenden Code aus den oben genannten Komponenten einfügen. Jede Einsicht würde sehr geschätzt werden.

router.js

const router = (
    <Router history={browserHistory} > 
    <Route path='/' component={App} > 
     <IndexRoute component={HomeLogic} /> 
     <Route path='businesses' > 
     <IndexRoute component={SearchBarLogic} /> 
     <Route path='addbusiness' component={AddBusinessFormLogic} /> 
     <Route path=':id' > 
      <IndexRoute component={BusinessesProfileLogic} /> 
      <Route path='deletebusiness' component={DeleteBusinessPageLogic} /> 
     </Route> 
     </Route> 
    </Router> 
); 

SearchBarLogic.js

import React, {Component} from 'react'; 
import SearchBar from '../layouts/SearchBar'; 

class SearchBarLogic extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     term: "", 
    }; 
    } 

    search(term) { 
    this.setState({ term }); 
    } 

    render(){ 
    let term = this.state.term 

    return (
     <div> 
     <SearchBar 
      term={term} 
      onSearchTermChange={(term) => {this.search(term)}} 
     /> 
     </div> 
    ) 
    } 
} 

export default SearchBarLogic; 

SearchBar.js

import React, {Component} from 'react'; 
import BusinessIndexLogic from '../logic/businesses/BusinessIndexLogic'; 

class SearchBar extends Component { 
    render(){ 
    return (
    <div> 
     <div className="nav-wrapper"> 
     <form> 
      <div className="input-field"> 
      <input 
       id="search" 
       type="search" 
       value={this.props.term} 
       onChange={(event) => {this.props.onSearchTermChange(event.target.value)}} 
      /> 
      </div> 
     </form> 
     </div> 
     <div> 
     <BusinessIndexLogic 
      value={this.props.term} 
     /> 
     </div> 
    </div> 
); 
    } 
} 

export default SearchBar; 

BusinessIndexLogic.js

import React, { Component } from 'react'; 
import { BusinessStorage } from '../../../config/FirebaseConstants'; 
import BusinessIndex from '../../pages/businesses/BusinessIndex'; 

class BusinessIndexLogic extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     allBusinesses: [], 
    } 
    } 

    componentDidMount() { 
    let _this = this; 
    let businesses = {}; 

    if (this.props.value === ""){ 
     BusinessStorage.ref('users/').once('value', function(allData) { 
     allData.forEach(function(data) { 
      data.forEach(function(userNode) { 
      if (userNode.val().type === 'businesses') { 
       if (userNode.val().deletedAt !== true) { 
       let companyName = userNode.val().companyName; 
       let idNumber = data.key; 
       businesses[companyName] = {name: companyName, id: idNumber} 
       } 
      } 
      }) 
     }) 
     }).then(function(user) { 
     let keys = Object.keys(businesses).sort(); 
     let sortedHash = {}; 
     let sortedArray = []; 

     for (let i = 0; i < keys.length; i++) { 
      let key = keys[i]; 
      sortedArray.push(sortedHash[key] = businesses[key]); 
     } 

     _this.setState({allBusinesses: sortedArray}, function afterBusinessSet() { 

     }); 
     }) 
    } else { 
    BusinessStorage.ref('users/').startAt(`${this.props.value}`).once('value', function(allData) { 
     allData.forEach(function(data) { 
     data.forEach(function(userNode) { 
      if (userNode.val().type === 'business') { 
      if (userNode.val().deletedAt !== true) { 
       let companyName = userNode.val().companyName; 
       let idNumber = data.key; 
       businesses[companyName] = {name: companyName, id: idNumber} 
      } 
      } 
     }) 
     }) 
    }).then(function(user) { 
     let keys = Object.keys(businesses).sort(); 
     let sortedHash = {}; 
     let sortedArray = []; 

     for (let i = 0; i < keys.length; i++) { 
     let key = keys[i]; 
     sortedArray.push(sortedHash[key] = businesses[key]); 
    } 

     _this.setState({allBusinesses: sortedArray}, function afterBusinessSet() { 

     }); 
    }) 
    } 
    } 

    render() { 
    let allBusinesses = this.state.allBusinesses; 
    let pathName = this.props.location.pathname; 

    return (
     <BusinessIndex 
     allBusinesses={allBusinesses} 
     pathName={pathName} 
     /> 
    ) 
    } 
} 

export default BusinessIndexLogic; 

Und der Fehler, den ich gerade in meiner Konsole bekomme, ist Uncaught TypeError: Cannot read property '_currentElement' of null, was nicht viel hilft. Wie ich schon sagte, würde jede Einsicht oder Vorschläge geschätzt werden. Vielen Dank.

Answer 1

Laut this bedeutet dieser Fehler, dass Ihr Code einen anderen Fehler verursacht, der die Wiedergabe Ihrer Komponenten verhindert. Liegt ein Fehler über dem in der Konsole? Wenn nicht, fügen Sie eine Fehlerbehandlung mit console.logs hinzu. Es ist wahrscheinlich etwas in Ihrer Promise-Kette (Firebase-Aufruf); fügen Sie am Ende der Kette .catch (err => console.log (err)) hinzu, aber führen Sie im Allgemeinen einige Fehler durch.