函数在React/Redux中返回[object Object]而不是html
函数在React/Redux中返回[object Object]而不是html
提问于 2018-07-04 06:00:55
我正在尝试当有人选择啤酒的名称时，弹出相应的啤酒厂的名称。在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);
回答 1
Stack Overflow用户
发布于 2018-07-04 06:17:29
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>
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51163339
复制相关文章
相似问题