Question

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

2020-06-05

1046

reactjs firebase react-native google-cloud-firestore

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

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

然后在渲染函数中处理 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" } )

您可以在 Text 标签内将状态变量用作 {this.state.familyName} 来呈现视图。请注意，更改状态变量将自动重新呈现组件。