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

Question

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

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>

更新。看起来它不会转移到状态。当我控制台记录状态时，它说未定义。：

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("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);
      });
  }

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

输出

2ndundefined
1stVilholm
Error getting document: [TypeError: undefined is not an object (evaluating 'this.setState')]

Answer 1

您可以setState familyName

    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>

或

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

把你的函数写成箭头函数

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);
      })}

Answer 2

不要使用 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>

如果你想在 doc 不存在时处理错误，你可以这样做：

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

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

Answer 3

使用生命周期方法 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} 在您的 Text 标记内呈现视图。请注意，更改状态变量会自动重新渲染组件。