javascript - 在 React 中从 Firebase 获取用户对象属性

Question

我在 Firebase 中有一个用户数据库，它使用唯一的用户 ID 作为键，并在该键/值对中使用名称:“jane doe”、电子邮件:“jane@doe.com”等。我想要什么要做的就是映射对象并获取其中的键值。我能够获取 key (用户 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 但收到“状态未定义”消息。有人能指出我正确的方向吗？谢谢!

Answer 1

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

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

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

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