Question

enter image description here我正在尝试使用从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;

Answer 1

您必须在事件函数中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]  })
});

此外，我认为您可以重新编写代码，因为您将同一变量与同一事件的两个不同实例一起使用。但这至少应该可以解决您的最初问题

在React组件状态下呈现数据的问题

1 个答案: