This.state возвращает только 1 элемент, в журнале консоли я вижу 2 - PullRequest
Новая
       29

This.state возвращает только 1 элемент, в журнале консоли я вижу 2

0 голосов
/ 10 июля 2019

Я пытаюсь отобразить мои объекты setState, но когда я отображаю их, я вижу только 1, но в журнале консоли я вижу, что оба объекта сохранены. 

  getUserTeams() {
    const user = firebase.auth().currentUser;
    var uid = user.uid;

    uzivateleRef.on("value", snapshot => {
      let dataTeams = snapshot.child("/" + uid + "/teams").val();

      let n = Object.keys(dataTeams).map((key, i) => {
        this._getTeamsAndRoles(
          dataTeams[key].roleID,
          dataTeams[key].teamID,
          uid
        );
      });
    });
  }

  _getTeamsAndRoles = (roleID, teamID, uid) => {
    fireRef.on("value", snapshot => {
      let dataTeams = snapshot.child("roles/teams/" + teamID + "/").val();
      let dataRoles = snapshot.child("roles/role/" + roleID + "/").val();

      let userTeams = (
        <View key={dataTeams.id} style={styles.row}>
          <Text style={styles.textContainerName}>{dataTeams.name}</Text>
          <Text style={styles.textContainerName}>{dataRoles.name}</Text>
        </View>
      );
      this.setState({ userTeams });
      console.log(this.state.userTeams);
    });
  };

И мне нужнополучить оба элемента, а не только 1 Вот как я отображаю setState

    <Text style={styles.h1}>- VAŠE TEAMY -</Text>
    {this.state.userTeams}
    <Button
      type="clear"
      titleStyle={{ color: "#3c59ff" }}
      title="Přidat se do nového teamu"
      onPress={null}
    />

Вот что я получаю в console.log:

enter image description hereenter image description here

Ответы [ 2 ]

1 голос
/ 10 июля 2019

setState работает асинхронно.выполнение этого 

this.setState({ userTeams });
console.log(this.state.userTeams);

не гарантирует, что вы сразу увидите обновленное значение.Если вы хотите, чтобы по каким-то причинам вы увидели значения, то один из ответов - это то, как ответил @Newell.

Обычно вам нужно знать, отображаются ли правильные данные, поэтому setState будет вызывать рендеринг после его завершения иВы можете проверить значение, поместив журнал в метод render.Взгляните на этот документ: https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

Предложение, рендеринг и хранение компонентов со значениями и их постоянное обновление в состоянии может привести к ненужным повторным визуализациям, и будет сложнее поддерживать и тестировать .Вместо этого создайте отдельный компонент и сделайте его контролируемым компонентом.Подробнее здесь: https://reactjs.org/docs/forms.html#controlled-components

1 голос
/ 10 июля 2019

При настройке состояния вы можете таким образом немедленно рендерить только что-нибудь в консоли. 

this.setState({ 
   // here you set up, what you need 
},()=>{
    console.log(this.state.anything)
})
...