Question

嗨，我有一个要迭代的对象：

this.props.recentMessages = {
    '4383456789': {
          'number': '4383456789',
          'created': 1531142643,
          'text': "Hello World"
     },
    '5141234567': {
          'number': '5141234567'
          'created': 1531173846
          'text': "This is the second text"
     }
}

但是我现在遇到的问题是它说this.props.recentMessages.map is not a function，所以我不确定如何正确地进行迭代，因为我能够更早地成功迭代一个字符串数组。我想在迭代之前先检查this.props.recentMessages是否存在。

render() {
  return (
    <div className="menu-tab">
      <LeftNav className="chat-left-nav">
        {this.props.recentMessages
          ? this.props.recentMessages.map(function(thread, index) {
              <LeftNavSC.Item>
                <span key={index} className="contact-name">
                  {thread.number}
                </span>
                <br />
              </LeftNavSC.Item>;
            })
          : ""}
      </LeftNav>
    </div>
  );
}

Answer 1

您不能像使用数组一样使用map遍历对象。您可以使用Object.keys获取对象中所有键的数组，并在其上map：

render() {
  const { recentMessages } = this.props;

  return (
    <div className="menu-tab">
      <LeftNav className="chat-left-nav">
        {recentMessages &&
          Object.keys(recentMessages).map(key => (
            <LeftNavSC.Item key={key}>
              <span className="contact-name">
                {recentMessages[key].number}
              </span>
              <br />
            </LeftNavSC.Item>
          ))}
      </LeftNav>
    </div>
  );
}

Answer 2

JavaScript中的对象没有if password == User.verify_hash(data['password'], user['hash']):函数，但是您可以使用Object.entries来获取可以迭代的键-值对数组。

# Create classes to store data.
class User:
""" This class provides a way to store user data. """

    users = [
        {
            'id': 1,
            'username': u'mwinel',
            'email': u'mwinel@example.com',
            'hash': u'$pbkdf2-sha256$20000$OCeEcM55zzlnbG3tfW9tTQ$k3dRDawLaOMlR4cehJEP/2b0JUTMrtPedzLYxNQWICM'
        },
        {
            'id': 2,
            'username': u'lucy',
            'email': u'lucy@example.com',
            'password': u'$pbkdf2-sha256$20000$8D6H0Npbaw3BWGsNYSxFyA$FxkRkBXuQy8VFRX8dSdygzQ4vNlvFJl6hWZQ6LT2NIc'
        }
    ]

在下面，您可以查看示例数据中的map返回的内容：

{Object.entries(this.props.recentMessages).map(([key, thread]) => {
  <LeftNavSC.Item>
    <span key={key} className="contact-name">
      {thread.number}
    </span>
    <br />
  </LeftNavSC.Item>;
})}

为了防止在迭代不存在的集合时出错，可以使用短路Object.entries运算符或使用or运算符const entries = Object.entries({ '4383456789': { 'number': '4383456789', 'created': 1531142643, 'text': "Hello World" }, '5141234567': { 'number': '5141234567', 'created': 1531173846, 'text': "This is the second text" } }) console.log(entries)提供空对象的默认值来迭代空集合都将导致空白视图：

&&

或具有默认值：

||

如何正确遍历渲染中的对象？

2 个答案: