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

Question

我试图让相应啤酒厂的名称在有人选择啤酒名称时弹出。在 filterSearch 函数中，如果我不将它包装在一个 div 中，我可以获得弹出的名称。只要我放入 JSX，它就会返回 [object Object]。我最终想退回带有各种信息的卡片，但现在，我正在逐步进行。

如有任何帮助，我们将不胜感激!

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

Answer 1

JSX 被编译成一堆 React.createElement 调用，所以当你执行 document.getElementById('cardDiv').append(someJSX) 时，它将是在 DOM 中呈现为对象。

你可以在你的状态中有一个变量，例如submitted，然后在你的 handleSubmit 方法中调用 this.setState({ submitted: true })，然后在你的 render 方法中检查是否 submitted 为 true，如果是，则呈现您的 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>
    );
  }
}