在lodash forOwn

问题描述

有一个React功能组件，可以接受时间戳，电子邮件和chatTxt作为道具

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

需要从上述形式的对象集合中创建的上述react组件的集合

timestamp: {email: chatText}

使用lodash， forOwn

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

由于Lodash forOwn仅返回自身迭代的对象，该怎么办？

解决方法

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

使用_.map()迭代对象时，传递给iteratee的第二个参数（称为函数）是键（timestamp）。无需迭代value，只需将其传播到组件上即可：

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

对于香草JS，请使用Object.entries()对[key，value]，然后使用Array.map()并进行结构分解以获取timestamp和其他值：

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