Question

我在ModalSelector上有_onChange函数，我需要从Firebase数据库中获取一些东西。

1）如果我在GetTeamOption（选项）中使用它

this.setState({TeamRequest: childComplete}

它不起作用。当我记录该状态时，它似乎是空字符串。

2）如果我在GetTeamOption（选项）中使用它

self.setState({TeamRequest: childComplete}, () => {});

日志不是空的，但它记录了相同的值，第一个。实际上我只在onChange函数中有这个问题。我在componentDidMount函数中使用几乎相同的代码用于另一个数据，1）示例按我的意愿工作。

  constructor(props){
    super(props);
    this.state = {
        Loaded: false,
        Optionn:'',
        LeagueOption: '',
        TeamOption: '',
        LeagueRequest: '',
        TeamRequest: '',
        TeamsToMapRequest: [],
        LeaguesToMapRequest: []
    }
}

  GetTeamOption(option){
        const self = this;
        let index = 0;
        let object = {};
        let TeamsArr = [];
    this.setState({LeagueOption: option.label}, function () {
        const refTeam = firebase.database().ref('leagues/' + this.state.LeagueOption + '/');
        refTeam.orderByChild('Team').on("value", function(snapshot) {
            snapshot.forEach((child) => {
                const childComplete = child.val().Team;
                console.log(childComplete); 
               //There I get 2 teams
               //FirstTeam
               //SecondTeam

               //First case
                self.setState({TeamRequest: childComplete}, () => {
                    console.log(self.state.TeamRequest);
                    //There I get this
                    //FirstTeam
                    //FirstTeam
                });

                //Second case
                this.setState({TeamRequest: childComplete}
                    console.log(self.state.TeamRequest);
                    //Log here is empty

            });
        });
    });
}

return（）函数

<ModalSelector onChange={ (option) => { this.GetTeamOption(option) } data={this.state.LeaguesToMapRequest}>
      <TextInput value={this.state.LeagueOption} />
</ModalSelector>

Answer 1

constructor(props){
    super(props);
    this.state = {
        Loaded: false,
        Optionn:'',
        LeagueOption: '',
        TeamOption: '',
        LeagueRequest: '',
        TeamRequest: '',
        TeamsToMapRequest: [],
        LeaguesToMapRequest: []
    }
}


GetTeamOption = (option) => {
    let index = 0;
    let object = {};
    let TeamsArr = [];
    this.setState({LeagueOption: option.label}, () => {
      const refTeam = firebase.database().ref('leagues/' + this.state.LeagueOption + '/');
      refTeam.orderByChild('Team').on("value", (snapshot) => {
        snapshot.forEach((child) => {
          const childComplete = child.val().Team;
          console.log(childComplete);
          //There I get 2 teams
          //FirstTeam
          //SecondTeam

          //First case
          this.setState({TeamRequest: childComplete}, () => {
            console.log(this.state.TeamRequest);
            //There I get this
            //FirstTeam
            //FirstTeam
          });

          //Second case
          this.setState({TeamRequest: childComplete}
          console.log(this.state.TeamRequest);
          //Log here is empty

        });
      });
    });
}

看起来您的问题是使用function语句而不是箭头函数。箭头函数没有自己的范围，它们继承了它们的范围。使用function关键字将为您的函数提供自己的范围。我删除了对self的引用。

您也可以在构造函数中使用this.GameTeamOption = this.GameTeamOption.bind(this);将组件的this上下文绑定到您的函数，或者您可以将其声明为箭头函数（这是我采用的方法）。

在onChange函数内部反应原生setState

1 个答案: