javascript - 使用 React 构建的搜索栏可查询 Firebase

Question

对于 React 来说相对较新，并尝试合并一个搜索栏来查询我的 Firebase 数据库中的“企业”节点。可以对我的组件流程使用一些指导/输入。

我最初的直觉告诉我，它应该类似于“路由器 > SearchBarLogic > SearchBar > BusinessIndexLogic > BusinessIndex”，其中一个术语从我的 SearchBar 传递到我的 BusinessIndexLogic 以帮助生成查询。

下面将粘贴我上面提到的组件中的相关代码。任何见解将不胜感激。

路由器.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)) 添加到链的末尾，但通常会在整个过程中进行一些错误处理。