函数正在返回[Object],而不是Reaction/Redux中的html怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (75)

当有人选择啤酒的名字时,我正试图让相应的啤酒厂的名字弹出。在filterSearch函数中,如果不将名称包装在div中,则可以获得弹出的名称。一旦我放进和JSX,它就会返回对象。

 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);

提问于
用户回答回答于

将JSX编译成一组React.createElement来调用,所以当你这么做的时候document.getElementById('cardDiv').append(someJSX),它将被呈现为DOM中的一个对象。

你可以在你的状态中有一个变量叫做submitted,在你的handleSubmit方法调用this.setState({ submitted: true }),然后在呈现方法中检查是否submittedtrue,并呈现你的beerData

class PopulateDropdowns extends Component {
  state = {
    beerData: []
  };

  handleSubmit = e => {
    e.preventDefault();
    this.setState({ submitted: true });
  };

  // ... 

  render() {
    return (
      <div id="mainDiv">
        {this.populateSelectLists()}
        <div className="col-12 text-center" id="cardDiv">
          {this.state.submitted &&
            this.state.beerData.filter(this.checkValue).map((res, index) => {
              return <div key={index}>{res["Brewery Name"]}</div>;
            })}
        </div>
        <button type="submit" onClick={this.handleSubmit}>
          SUBMIT
        </button>
      </div>
    );
  }
}

扫码关注云+社区

领取腾讯云代金券