検索バーがReactを使用して作成されたFirebase

Question

Firebirdデータベース内の「ビジネス」ノードを照会する検索バーを組み込むことが比較的新しくなりました。私のコンポーネントの流れにいくつかのガイダンス/入力を使用することができました。

私の最初の本能は、「ルータ> SearchBar> 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））をチェーンの最後に追加します。しかし、一般的には、いくつかのエラー処理を行います。