Javascript 在react组件状态下呈现数据时出现的问题

我正在尝试使用从firebase获得的数据设置组件中两种不同状态（选项1和选项2）的状态。处于组件状态的数据将用于从属下拉列表。我已经能够使用新的firebase数据设置状态（我知道这一点，因为我看到我的组件的状态是使用react developer工具从数据库中获取的数据）。但是，数据不会在下拉列表中呈现。有什么我做错了或应该做的吗

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;

类别损害扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“反应”，
已选择选项：{}，
选择选项2:{}，
选项1:[]，
选项2:[]
};
}
componentDidMount（）{
这是getnewData（）；
}
//火基提取
getnewData（）{
var rootRef=firebase
.数据库（）
.ref（）
.儿童（“测试”）；
var opt=[]；
rootRef.on（“添加的子对象”，快照=>{
选择推送({
值：snapshot.val（）.value，
标签：snapshot.val（）.label
});
});
var rootRef=firebase
.数据库（）
.ref（）
.儿童（“测试2”）；
var optio=[]；
rootRef.on（“添加的子对象”，快照=>{
选择推({
标签：snapshot.val（）.label，
链接：snapshot.val（）.link，
值：snapshot.val（）.value
});
});
这是我的国家({
选择1：选择
});
这是我的国家({
选项2：选项
});
}
handleChange1=selectedOption=>{
this.setState（{selectedOption}）；
};
handleChange2=已选择选项=>{
this.setState（{selectedOption2:selectedOption}）；
};
render（）{
const filteredOptions=this.state.options 2.filter(
o=>o.link==this.state.selectedOption.value
);
返回(
选择域

然后子域

);
}
}
出口违约减值；

您必须

在事件函数中设置state

当前您没有这样做，这些事件是异步的，所以当您现在设置state时，数组是空的

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

---

此外，我认为您可以稍微重写代码，因为您对同一事件的两个不同实例使用相同的变量。但这至少可以解决您最初的问题

是选择自定义组件吗？给我们看看你的代码。如果它是html元素，它应该是

select

（小写），您应该迭代以创建所有选项标记。请参阅opt.push和opto.push在异步回调中完成。当opt和optio阵列不可用时，正在设置状态populated@Gonzalo.-是选择是我下载的自定义软件包。问题是，当我硬编码选项1和选项2状态的值时，它就起作用了。然而，当我设置firebase数据的状态时，它就不再工作了。@MartínZaragoza我不明白。我看到状态从firebase更新到数组，它不仅仅是渲染。Yetunde，检查@Gonzalo.-的答案below@yetundeokunola这就是我说的我按照你的建议改变了我的想法。然而，它仍然不起作用。我将在react开发者控制台和呈现页面的屏幕上附加一个屏幕，以进一步澄清我的问题。您能否提供一个小提琴，让我们可以使用代码并重现您的问题？