Javascript 如何在渲染中正确迭代对象？

嗨，我有一个对象，我正在尝试迭代：

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不是一个函数

，因此我不确定如何更正迭代，因为我之前能够成功地迭代字符串数组。我想先检查

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

render（）{
返回(
{this.props.recentMessages
？this.props.recentMessages.map（函数（线程、索引）{
{thread.number}


;
})
: ""}
);
}

不能像使用数组那样使用

map

对对象进行迭代。您可以使用获取对象中所有键的数组，并在该数组上映射

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

render（）{
const{recentMessages}=this.props；
返回(
{最近的消息&&
key（recentMessages）.map（key=>(
{recentMessages[key].number}


))}
);
}

JavaScript中的对象没有

map

函数，但是您可以使用它来获取一个键值对数组，您可以迭代该数组

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

---

您没有告诉它在映射中返回JSX。尝试添加

return

可能重复的