Reactjs 显示文本而不是控制台日志

我想在文本组件中显示文本，而不是控制台记录它。我已经在一个函数中获得了信息，现在它只是控制台记录它。我想从函数中获取信息并将其置于状态，然后通过从状态中获取信息来显示它

state = {
    displayName: firebase.auth().currentUser.displayName,
    email: firebase.auth().currentUser.email,
    familyName: this.getFamilyName(),
  };

  getFamilyName() {
    return firebase
      .firestore()
      .collection("users")
      .doc(firebase.auth().currentUser.email)
      .get()
      .then(function (doc) {
        if (doc.exists) {
          console.log(doc.data().familyname);
          return doc.data().familyname;
        } else {
          // doc.data() will be undefined in this case
          console.log("No such document!");
        }
      })
      .catch(function (error) {
        console.log("Error getting document:", error);
      });
  }

  render() {
    return (
      <ScrollView>
        <View>
          <ThemeProvider>
            <Text style={{ textAlign: "center", top: 20, fontSize: 14 }}>
              FAMILIE
            </Text>
            <Text h2 style={{ textAlign: "center", top: 20 }}>
              {this.state.familyName}
            </Text>

---

您可以设置状态家庭名称

    if (doc.exists) {
          console.log(doc.data().familyname);
          this.setState({'familyName':doc.data().familyname})
        }

现在，Text组件显示了familyName

      <Text h2 style={{ textAlign: "center", top: 20 }}>
          {this.state.familyName&&this.state.familyName}
      </Text>

---

与其使用firebase设置初始状态，不如将其初始化为默认值，然后在检索信息时只缺少一个setState，只需执行以下操作：

state = {
    displayName: firebase.auth().currentUser.displayName,
    email: firebase.auth().currentUser.email,
    familyName: '',
  };

  getFamilyName() {
    return firebase
      .firestore()
      .collection("users")
      .doc(firebase.auth().currentUser.email)
      .get()
      .then(function (doc) {
        if (doc.exists) {
          console.log(doc.data().familyname);

          const name = doc.data().familyname;
          this.setState({ familyName: name )}

      } else {
          // doc.data() will be undefined in this case
          console.log("No such document!");
        }
      })
      .catch(function (error) {
        console.log("Error getting document:", error);
      });
  }

  render() {
    return (
      <ScrollView>
        <View>
          <ThemeProvider>
            <Text style={{ textAlign: "center", top: 20, fontSize: 14 }}>
              FAMILIE
            </Text>
            <Text h2 style={{ textAlign: "center", top: 20 }}>
              {this.state.familyName}
            </Text>

---

然后在render函数中处理familyName的值（可能使用三元运算符）

使用生命周期方法componentDidMount（）。将初始状态定义为空字符串

state = {
    displayName: '',
    email: '',
    familyName: '',
  };

componentDidMount() {
    this.setState({familyName : firebase.auth().currentUser.displayName })
    this.setState({familyName : firebase.auth().currentUser.email })
    this.setState({familyName : this.getFamilyName() })
}

如果要在其他位置设置状态，可以将字段更新为

this.setState( { familyName : "Your String" } )

您可以将状态变量用作

---

{this.state.familyName}在文本标记中显示视图。请注意，更改状态变量将自动重新呈现组件。

谢谢您的回答。当我尝试使用它时，它会给我以下错误：“获取文档时出错：[TypeError:undefined不是一个对象（计算'this.setState'）]”（可能是因为您没有发布任何错误行或更多代码），这与doc.data（）相关。尝试记录/使用调试器查看doc.data（）及其结构，可能它是空的，或者该特定文档的属性familyname不存在。当我尝试使用它时，它会给我一个错误“对象作为React子对象无效（找到：具有键{u 40，{u 65，{u 55，{u 72}的对象）。如果您想要呈现子对象集合，请使用数组代替。”谢谢您的回答。当我尝试此操作时，它会给出以下错误“警告：失败的道具类型：无效的道具

子项
类型
array
提供给
Overlay
，应为单个元素”我已更新了答案。请尝试用视图包装两个文本组件，以便将信息获取到视图时出现问题。我试着打印出不同地方的名字，其中一个地方没有定义。我将用我的问题中的代码和输出进行更新。@mariusvillholm您还有问题吗？如果有，请随时询问：）
getFamilyName=()=> {
    return firebase
      .firestore()
      .collection("users")
      .doc(firebase.auth().currentUser.email)
      .get()
      .then((doc)=> {
        if (doc.exists) {
          console.log("1st" + doc.data().familyname);
          const name = doc.data().familyname;
          this.setState({ familyName: name });
        } else {
          // doc.data() will be undefined in this case
          console.log("No such document!");
        }
      })
      .catch(function (error) {
        console.log("Error getting document:", error);
      })}

state = {
    displayName: firebase.auth().currentUser.displayName,
    email: firebase.auth().currentUser.email,
    familyName: '',
  };

  getFamilyName() {
    return firebase
      .firestore()
      .collection("users")
      .doc(firebase.auth().currentUser.email)
      .get()
      .then(function (doc) {
        if (doc.exists) {
          console.log(doc.data().familyname);

          const name = doc.data().familyname;
          this.setState({ familyName: name )}

      } else {
          // doc.data() will be undefined in this case
          console.log("No such document!");
        }
      })
      .catch(function (error) {
        console.log("Error getting document:", error);
      });
  }

  render() {
    return (
      <ScrollView>
        <View>
          <ThemeProvider>
            <Text style={{ textAlign: "center", top: 20, fontSize: 14 }}>
              FAMILIE
            </Text>
            <Text h2 style={{ textAlign: "center", top: 20 }}>
              {this.state.familyName}
            </Text>


      } else {
          // doc.data() will be undefined in this case
          this.setState({familyName: false})
        }
      })


state = {
    displayName: '',
    email: '',
    familyName: '',
  };

componentDidMount() {
    this.setState({familyName : firebase.auth().currentUser.displayName })
    this.setState({familyName : firebase.auth().currentUser.email })
    this.setState({familyName : this.getFamilyName() })
}

this.setState( { familyName : "Your String" } )