Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
196 views
in Technique[技术] by (71.8m points)

reactjs - React object and array iteration

I have a Truck component that renders a truck's name from an object that obejct contains the name of the truck and the orders assigned to it, and I have another object with the order's and the date they should be fulfilled. So far my components look like below. The truck component renders every truck in the object and can be filtered via an input. My goal here is to render the orders according to the search and render the due date "from-to" so 2 dates in the Order component. How could I take the assignedOrderId from the TrucksContext and search by that in the OrderContext and return the Id and 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;
question from:https://stackoverflow.com/questions/65848966/react-object-and-array-iteration

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

This was the solution

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;

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...