This.state 只返回 1 项，在控制台日志中我看到 2答案

【问题标题】：This.state is giving back only 1 item, in console log i see 2This.state 只返回 1 项，在控制台日志中我看到 2
【发布时间】：2019-07-10 09:43:24
【问题描述】：

我正在尝试渲染我的 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 中得到的：

【问题讨论】：

删除你的console.log并将它放在firebase.on()之外，你会看到那里。在这里，您在循环中记录了值

标签： javascript reactjs react-native rendering state

【解决方案1】：

在设置状态时，您只能通过这种方式立即在控制台中渲染任何内容。

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

【讨论】：

【解决方案2】：

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

【讨论】：