在 React 中从 Firebase 获取用户对象属性答案

【问题标题】：Get user object properties from Firebase in React在 React 中从 Firebase 获取用户对象属性
【发布时间】：2016-11-08 19:18:26
【问题描述】：

我在 Firebase 中有一个用户数据库，它使用唯一的用户 ID 作为键，并在该键/值对中，例如名称：'jane doe'、电子邮件：'jane@doe.com' 等。我想要什么做的是映射对象并获取其中的键值。我能够获取密钥（用户 ID），但不能获取对象键值对。这是我的代码：

  export default class Home extends Component {

    constructor(props) {
     super(props);

     var users = {};
     this.state = { users };
   }

   componentDidMount() {
    const dbRoot = firebaseDb.database().ref().child('users');

    dbRoot.on('value', snap => {
     const dbUsers = snap.val(); 

     this.setState({
       users: dbUsers
     });
   });
}


  render() {
    return (
      <div>
        <div>
          {Object.keys(this.state.users).map(function(user, i) {
            return <div key={i}>Key: {user}, Value: {user.name}</div>;
          })}
        </div>
    </div>);

  }

}

user.name 返回未定义。我试过使用 this.state.users.name 但我收到“状态未定义”消息。有人可以指出我正确的方向。谢谢！

【问题讨论】：

如果你确定你从 db 得到了想要的值，使用 setstate 作为 this.setState({users:JSON.parse(dbUsers)})

标签： javascript reactjs firebase firebase-realtime-database

【解决方案1】：

您的代码有两个主要问题。首先是你不能在map() 函数的回调中访问this.state，因为this 绑定到该函数而不是整个类。有几种方法可以将 this 变量绑定到类，但最简洁的方法是使用 Arrow function 语法。

一旦你这样做了，你仍然会遇到问题。您正在使用 Object.keys ，它只会映射结果的键，但您将其视为将整个用户对象传递给函数。为了在回调函数中访问用户对象，您需要使用括号符号和键。

考虑到这两点，您的代码应该如下所示：

{Object.keys(this.state.users).map(key => {
    return <div key={key}>Key: {key}, Value: {this.state.users[key].name}</div>;
})}

【讨论】：