Question

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

Answer 1

设置状态时，您只能立即以这种方式在控制台中呈现任何内容。

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

Answer 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

this.state仅返回1个项目，在控制台日志中我看到2

2 个答案: