在lodash中创建React组件

Question

拥有一个接受时间戳、电子邮件和chatTxt作为道具的React功能组件

function UserChat({timestamp,email,chatTxt}) {
    return (
      .....
    )
}

需要从窗体的对象集合中创建上述react组件的集合。

timestamp: {email: chatText}

通过使用lodash，forOwn

forOwn(props.chatObj, (value,timestamp) => 
        forOwn(value, (chatTxt,email) => {
            
        })
  })

既然Lodash forOwn只返回自己迭代过的对象，那么怎么做呢？

Answer 1

如果要呈现UserChat组件的列表，则需要一个数组，所以使用_.map()而不是_.forOwn()。

当使用_.map()迭代对象时，第二个参数传递给迭代器(被调用的函数)是关键(timestamp)。不需要迭代value，只需将其扩展到组件上：

_.map(props.chatObj, (value, timestamp) => (
  <UserChat {...value} timestamp={timestamp} key={timestamp} />
))

在vanilla中，使用Object.entries()对键、值进行配对，然后使用Array.map()和析构来获得timestamp和其他值：

Object.entries(props.chatObj).map(([timestamp, value]) => (
  <UserChat {...value} timestamp={timestamp} key={timestamp} />
))