[英]Issues with rendering the data in the state of react component
在此处输入图片描述,我正在尝试使用从Firebase获取的数据来设置组件中两个不同状态的状态(options1和options2)。 组件状态下的数据将用于从属下拉列表。 我已经能够使用新的Firebase数据来设置状态(我知道这一点是因为我看到组件的状态是使用react开发人员工具从数据库中获得的数据)。 但是,数据不会在下拉列表中呈现。 是否有我在做错或应该做的事情。
class Impairement extends Component {
constructor() {
super();
this.state = {
name: "React",
selectedOption: {},
selectedOption2: {},
options1: [],
options2: []
};
}
componentDidMount() {
this.getnewData();
}
//firebase fetch
getnewData() {
var rootRef = firebase
.database()
.ref()
.child("test");
var opt = [];
rootRef.on("child_added", snapshot => {
opt.push({
value: snapshot.val().value,
label: snapshot.val().label
});
});
var rootRef = firebase
.database()
.ref()
.child("test2");
var optio = [];
rootRef.on("child_added", snapshot => {
optio.push({
label: snapshot.val().label,
link: snapshot.val().link,
value: snapshot.val().value
});
});
this.setState({
options1: opt
});
this.setState({
options2: optio
});
}
handleChange1 = selectedOption => {
this.setState({ selectedOption });
};
handleChange2 = selectedOption => {
this.setState({ selectedOption2: selectedOption });
};
render() {
const filteredOptions = this.state.options2.filter(
o => o.link === this.state.selectedOption.value
);
return (
<div>
<p>Select Domain</p>
<Select
name="form-field-name"
value={this.state.selectedOption.value}
onChange={this.handleChange1}
options={this.state.options1}
/>
<p>Then Subdomain</p>
<Select
name="form-field-name"
value={this.state.selectedOption2.value}
onChange={this.handleChange2}
options={filteredOptions}
/>
</div>
);
}
}
export default Impairement;
您必须在事件函数中设置setState
当前您不执行此操作,这些事件是异步的,因此当您现在执行setState时,数组为空
rootRef.on("child_added", snapshot => {
let element = {
label: snapshot.val().label,
link: snapshot.val().link,
value: snapshot.val().value
};
this.setState(prevState => ({ options1: [...prevState.options1, element] })
});
// notice I store the second reference in another variable
rootRef2.on("child_added", snapshot => {
let element = {
label: snapshot.val().label,
link: snapshot.val().link,
value: snapshot.val().value
});
this.setState(prevState => ({ options2: [...prevState.options2, element] })
});
此外,我认为您可以重写代码,因为您将同一个变量与同一个事件的两个不同实例一起使用。 但这至少应该解决您的最初问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.