时间戳

首页 > 解决方案 > 在 lodash forOwn 中创建 React 组件

reactjs - 在 lodash forOwn 中创建 React 组件

问题描述

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

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

需要从表单的对象集合创建的上述反应组件的集合

timestamp: {email: chatText}

通过使用 lodash ，forOwn

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

由于 Lodash forOwn 只返回自身迭代的对象，那怎么做呢？

标签： reactjsfunctional-programminglodash

解决方案

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

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

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

使用 vanilla JS 使用Object.entries()[key, value] 对，然后使用Array.map()和解构来获取timestamp和其他值：

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

推荐阅读