javascript - 匹配对象 ObjectId 以使用其 "matching"数据

Question

(抱歉我的画很精美，只有红色)

我有两个对象:

“驱动程序”对象

以及“Carrier”对象

在我的 React 应用程序中，我可以显示 driver 对象中的所有属性，但我还需要来自 Carrier 对象的 image .

(抱歉，如果这看起来很困惑)。以下是我目前对正在获取的所有其他数据所做的操作:

const event = this.props.events || []
const lock = this.props.locks || []
const customer = this.props.customers || []
const driver = this.props.drivers || []
const carriers = this.props.carriers || []

const keyedCustomers = _.keyBy(customer, '_id')
const keyedDrivers = _.keyBy(driver, '_id')
const keyedLocks = _.keyBy(lock, '_id')

const keyedCarriers = _.keyBy(carriers, 'image')

const events = event.slice(0, this.state.showCount).map((event, i) => {
  return (
    <EventItem
      key={i}
      event={event}
      customer={keyedCustomers[event.customer]}
      carriers={keyedCarriers[event.driver]}
      driver={keyedDrivers[event.driver]}
      lock={keyedLocks[event.unit] || { address: {} }}
    />
  )
})

然后在该子组件内部使用它:

    export default class EventItem extends Component {
  render() {
    const { event, customer, driver, lock, carriers } = this.props
    const isCustomer = !customer
    const person = customer || driver

    return (
      <div>
        <Row style={{ marginTop: '-10px' }}>
          <Col md={12}>
            <ul className="events-list">
              <li className="events-flex-container">
                <div className="events-flex-item-1">
                  <h5 className="events-title-text">
                    {isCustomer ? `HEJSAN` : null} {person.name}
                    {`${person.name} ${person.surname} öppnade ${lock.custom_name} på ${lock
                      .address.street}`}
                  </h5>
                  <p className="events-sub-title-text">
                    {moment(`${event.timestamp}`).format(
                      'MM/D [klockan] HH:mm'
                    )}
                  </p>
                </div>
              </li>
            </ul>
          </Col>
        </Row>

)

我的问题

由于驱动程序对象包含与载体相同objectId的关键载体/strong> 对象，但使用键 _id 可以映射这些对象，并从 Carrier 中挑选出 image url 以及这些 Prop “一个”对象。

Answer 1

您可以通过id过滤运营商，并可以从过滤后的运营商中获取图像。

const carrier = carriers.filter((carrier) => (carrier._id === driver.carrier));

此外，从您的图片中我可以看出您正在使用 MongoDB。您可以尝试使用db.aggregate(...)尝试根据需要填充结果。

另一种方法是您可以将载体.图像添加到驱动程序对象中，以获得更容易访问的选项。当然，此选项还添加了一些您应该考虑的数据库存储。