问函数在React/Redux中返回[object Object]而不是html

EN

 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { fetchBeerData } from '../../store/store';
 import { bindActionCreators } from 'redux';
// import { Cards } from '../Cards/Cards';
 
 class PopulateDropdowns extends Component {
 
   state = {
     beerData: []
   }
   
   initialized = false;
 
   componentWillReceiveProps(nextProps){
     if(!this.initialized){
       this.initialized = true;
       this.setState({
        beerData: nextProps.beerData
       })
     }
   }
 
   componentWillMount(){
     this.props.fetchBeerData();
   }
 
   populateSelectLists = () => {
    let brewArr = this.state.beerData
    .sort((a, b) => a[this.props.dataName].localeCompare(b[this.props.dataName]))
    .filter((data, index, self) =>
      index === self.findIndex((d) => (
      d[this.props.dataName] === data[this.props.dataName]
      ))
    )
    let newBrewArr = brewArr.map((e, index) =>
       <option key={index}> {e[this.props.dataName]} </option>
    )

    return(
      this.props.dataName==='Brewery Name'
      ? 
      <form>
        <div className="form-group">
          <label htmlFor="exampleFormControlSelect1">{this.props.label}</label>
            <select className="form-control" id="brew-form-select">
             {newBrewArr}
            </select>
          </div>
      </form>
      :
      <form>
      <div className="form-group">
        <label htmlFor="exampleFormControlSelect1">{this.props.label}</label>
          <select className="form-control" id="beer-form-select">
           {newBrewArr}
          </select>
        </div>
    </form>
    )
  }

  handleSubmit = (e) => {
    e.preventDefault();
    document.getElementById('cardDiv').append(this.filterSearch())
  }

  filterSearch = () => {
    let brewArr = this.state.beerData
    let brewMap = brewArr.filter(this.checkValue).map((res, index) => {   
      return(
        <div key={index}>
          {res['Brewery Name']}
        </div>
      )    
    })
    return (brewMap)
  }

  checkValue = (brew) => {
    return brew['Beer Name'] === this.selectValue()
  }
   
  selectValue = () => {
    let brewVal = document.getElementById('brew-form-select').value
    let beerVal= document.getElementById('beer-form-select').value
    return (this.props.dataName==='Brewery Name' ? brewVal : beerVal)
  }

   render() { 
     return (
       <div id='mainDiv'>
          {this.populateSelectLists()}
          <div className='col-12 text-center' id='cardDiv'></div>
          <button type='submit' onClick={this.handleSubmit}>SUBMIT</button>
       </div>
     )
   }
 }
 
 const mapStateToProps = state => {
   if (state.beerData.length > 0) {
     return {
       beerData: state.beerData
     }
   } else {
     return {};
   }
 };
 
 const mapDispatchToProps = dispatch => {
   return bindActionCreators({ fetchBeerData }, dispatch)
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(PopulateDropdowns);