使用查詢的React構建的搜索欄Firebase

Question

與React相對比較新，並嘗試合併在我的Firebase數據庫中查詢「企業」節點的搜索欄。可以對我的組件的流程使用一些指導/輸入。

我最初的直覺告訴我它應該像'路由器> SearchBarLogic> SearchBar> BusinessIndexLogic> BusinessIndex'這樣的術語從我的SearchBar傳遞到BusinessIndexLogic以幫助生成我的查詢。

去粘貼我上面提到的組件的相關代碼。任何有識之士將不勝感激。

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; 

而我目前在我的控制檯中出現的錯誤是Uncaught TypeError: Cannot read property '_currentElement' of null，這沒有什麼幫助。就像我說的，任何見解或建議，將不勝感激。謝謝。

Answer 1

據this，該錯誤意味着你的代碼拋出該問題，導致從渲染您的組件不同的錯誤。控制檯中是否有錯誤？如果沒有，請使用console.logs添加一些錯誤處理。這可能是您的Promise鏈（Firebase調用）中的某個東西;將.catch（err => console.log（err））添加到鏈的末尾，但通常會在整個過程中執行一些錯誤處理。