React 对象和数组迭代答案

【问题标题】：React object and array iterationReact 对象和数组迭代
【发布时间】：2021-01-22 16:23:40
【问题描述】：

我有一个卡车组件，它从一个对象呈现卡车的名称，该对象包含卡车的名称和分配给它的订单，我还有另一个包含订单的对象和应履行的日期。到目前为止，我的组件如下所示。卡车组件渲染对象中的每辆卡车，并且可以通过输入进行过滤。我的目标是根据搜索呈现订单并呈现截止日期“从-到”，因此订单组件中的 2 个日期。如何从 TrucksContext 中获取assignedOrderId 并在 OrderContext 中搜索并返回 Id 和 from-to？

   const Truck = (props) => {
  const { name, orders } = props;

  return (
    <div className='outer'>
      <div className='nameHolder'>
        <p>{name}</p>
      </div>

      <div className='orderHolder'>
        <OrdersProvider>
          <Order orderName={orders} />
        </OrdersProvider>
      </div>
    </div>
  );
};

export default Truck;

    const Orders = (props) => {
  const { orderName } = props;
  const [orders, setOrders] = useContext(OrdersContext);

  console.log(`This is the order1: ${orderName}`);
  console.log(orders);

  const filteredOrders = orders.filter((order) => {
    return order.id.includes(orderName.assignedOrderId);
  });

  console.log(filteredOrders);

  return (
    <div className='outer'>
      <p>{orderName}</p>
    </div>
  );
};

export default Orders;

【问题讨论】：

标签： reactjs use-context

【解决方案1】：

这就是解决方案

const Orders = (props) => {
  const { orderName } = props;
  const [orders, setOrders] = useContext(OrdersContext);

  console.log(`This is the order1: ${orderName}`);
  console.log(orders);

  const filteredOrders = orders.filter((order) => {
    if (orderName.includes(order.id)) {
      return order.id;
    }
  });

  console.log(filteredOrders);

  return (
    <div className='outer'>
      <p>{orderName}</p>
    </div>
  );
};

export default Orders;

【讨论】：