Javascript 函数返回[object object]，而不是React/Redux中的html_Javascript_Reactjs

Javascript 函数返回[object object]，而不是React/Redux中的html

javascript reactjs

Javascript 函数返回[object object]，而不是React/Redux中的html,javascript,reactjs,Javascript,Reactjs,当有人选择啤酒的名称时，我试图让相应啤酒厂的名称弹出。在filterSearch函数中，如果不将其包装在div中，我可以获得弹出的名称。只要我将和JSX放入，它就会返回[object]。我最终还是想归还卡片，上面有各种各样的信息，但现在，我正在小步走任何帮助都将不胜感激 import React，{Component}来自'React'；从'react redux'导入{connect}；从“../../store/store”导入{fetchBeerData}；从“redux”导入{

当有人选择啤酒的名称时，我试图让相应啤酒厂的名称弹出。在filterSearch函数中，如果不将其包装在div中，我可以获得弹出的名称。只要我将和JSX放入，它就会返回[object]。我最终还是想归还卡片，上面有各种各样的信息，但现在，我正在小步走

任何帮助都将不胜感激

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../../store/store”导入{fetchBeerData}；
从“redux”导入{bindActionCreators}；
//从“../Cards/Cards”导入{Cards}；
类PopulatedDropDowns扩展组件{
状态={
比尔达：[]
}
初始化=假；
组件将接收道具（下一步）{
如果（！this.initialized）{
this.initialized=true；
这是我的国家({
beerData:nextrops.beerData
})
}
}
组件willmount（）{
this.props.fetchBeerData（）；
}
PopulateSelectList=（）=>{
让brewArr=this.state.beerData
.sort（（a，b）=>a[this.props.dataName].localeCompare（b[this.props.dataName]））
.filter（（数据、索引、自身）=>
索引===self.findIndex（（d）=>(
d[this.props.dataName]==data[this.props.dataName]
))
)
让newBrewArr=brewArr.map（（e，index）=>
{e[this.props.dataName]}
)
返回(
this.props.dataName==='Brewery Name'
? 
{this.props.label}
{newBrewArr}
:
{this.props.label}
{newBrewArr}
)
}
handleSubmit=（e）=>{
e、 预防默认值（）；
document.getElementById（'cardDiv'）.append（this.filterSearch（））
}
过滤器搜索=（）=>{
让brewArr=this.state.beerData
让brewMap=brewArr.filter（this.checkValue）.map（（res，index）=>{
返回(
{res['Brewery Name']}
)    
})
返回（brewMap）
}
checkValue=（brew）=>{
返回brew['Beer Name']==this.selectValue（）
}
选择值=（）=>{
设brewVal=document.getElementById（'brew-form-select'）。值
让beerVal=document.getElementById（'beer-form-select'）。值
return（this.props.dataName==='Brewery Name'？brewVal:beerVal）
}
render（）{
返回(
{this.populateSelectList（）}
提交
)
}
}
常量mapStateToProps=状态=>{
如果（state.beerData.length>0）{
返回{
beerData:state.beerData
}
}否则{
返回{}；
}
};
const mapDispatchToProps=调度=>{
返回bindActionCreators（{fetchBeerData}，dispatch）
};
导出默认连接（MapStateTrops、mapDispatchToProps）（填充下拉菜单）

JSX被编译成一组

React.createElement

调用，因此当您执行

document.getElementById（'cardDiv'）.append（someJSX）

时，它将作为DOM中的对象呈现

你可以在你的状态中有一个变量，例如

submitted

，在你的

handleSubmit

方法调用

this.setState（{submitted:true}）

，然后在你的呈现方法中检查

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

类填充下拉列表扩展组件{
状态={
比尔达：[]
};
handleSubmit=e=>{
e、 预防默认值（）；
this.setState（{submitted:true}）；
};
// ... 
render（）{
返回(
{this.populateSelectList（）}
{this.state.submitted&&
this.state.beerData.filter（this.checkValue）.map（（res，index）=>{
返回{res[“Brewery Name”]}；
})}
提交
);
}
}