Question

我正在学习本机响应，我真的不明白为什么我无法在我的渲染器的 View

中显示返回的var 用户名

我尝试了几件事，但没有人工作

Read() {

    var userId = firebase.auth().currentUser.uid;
    return firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) {
    var username= snapshot.val() && snapshot.val().profile_picture
      alert(username);
      this.setState({username})
      // How to display username into my return
    });
  }

render() {
    const {username} = this.state

    return (
      <View style={styles.container}>
      <Avatar style={styles.photo}
        size="small"
        rounded
        source={{uri: "#"}}
        onPress={() => this.Read()}
        activeOpacity={0.7}
      />
      <Text style={styles.paragraph}>
        {username} //display nothing 
      </Text>
      <View >

我在Read（）中添加了一个警报，以检查是否获得了想要的值，因此我知道var用户名存储了要显示在视图中的值。

控制台日志： log screen

Answer 1

this.setState() in React takes an object that describes the state keys to update。

我们可以使用简写{username}来创建{username: username}形式的对象，因此：

class Component {
  Read() {
    var userId = firebase.auth().currentUser.uid;
    return firebase
      .database()
      .ref("/users/" + userId)
      .once("value")
      .then((snapshot) => {
        var username = snapshot.val() && snapshot.val().profile_picture;
        alert(username);
        this.setState({username});  // <-- this has changed
      });
  }

  render() {
    const { username } = this.state;

    return (
      <View style={styles.container}>
        <Avatar
          style={styles.photo}
          size="small"
          rounded
          source={{ uri: "#" }}
          onPress={() => this.Read()}
          activeOpacity={0.7}
        />
        <Text style={styles.paragraph}>{username}</Text>
      </View>
    );
  }
}

Answer 2

问题在语法中，您没有更新正确的状态。

错误的语法： this.setState（username）

正确的语法： this.setState（{用户名}）

这是问题所在：

const username = snapshot.val（）&& snapshot.val（）。profile_picture;

尝试像这样更改以下代码行： const username = snapshot.val（）

让我知道是否提供用户名。

Answer 3

您试图使用this对象，该对象将您的组件引用到传统函数中，它没有绑定组件的上下文（得到类似 setState之类的错误不是函数），因为setState在您的函数上下文中不可用，因此请在Read函数内部使用箭头函数，如下所示：

Read() {
    var userId = firebase.auth().currentUser.uid;
    return firebase
      .database()
      .ref("/users/" + userId)
      .once("value")
      .then((snapshot) => {
        const username = snapshot.val() && snapshot.val().profile_picture;
        this.setState({ username : username });
        // You can use shorthanded syntax if you want 
        // this.setState({ username });
      });
 }

将返回的var的值显示到render react native中

3 个答案: