Как я могу включить данные в свою карту из другого массива?

ProgramBox

Как я могу включить данные в свою карту из другого массива?

Post author:admin
Запись опубликована:6 марта, 2023
Post category:Вопросы по программированию

#javascript #reactjs

Вопрос:

У меня есть следующий код:

 const OrderLines = (props) => {
  const { orderlines } = props
  const { items } = props

  console.log(items)

  if (orderlines === undefined) {
    return (
      <div className="ml-12 mt-8 uppercase text-2x font-bold">No Outstanding Orders</div>
    )
  }

  if (orderlines instanceof Array) {
    return (
      <div className="bg-white">
        <table className="min-w-full mx-12 divide-y divide-gray-200">
          <thead>
            <tr>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Ref</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Date</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Ordered</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Checked In</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">SKU</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">ITEM DESCRIPTION</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {orderlines instanceof Array amp;amp; orderlines.map(order =>
              order.OrderLines.OrderLine instanceof Array amp;amp; order.OrderLines.OrderLine.map(line => {
                if (line.quantity != line.checkedIn) {

                  return (
                    <tr>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.orderID}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.refNum}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.orderedDate.slice(0, 10)}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.quantity}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.checkedIn}</td>
                      <td className="px-6 py-4 whitespace-no-wrap"></td>
                    </tr>)
                }

              }))}
          </tbody>
        </table>
      </div>
    )
  }

Как вы можете видеть, я использую .map() в orderlines для возврата нужной мне информации.

Я пробовал различные воплощения и не могу связать свои данные.

Чего я пытаюсь добиться, так это использовать данные из моего массива «items», которые соответствуют элементу «line»

Итак, line.ItemId === item.ItemId

Надеюсь, вы понимаете, к чему я клоню, как мне включить данные из элементов в мою карту orderlines map()?

Итак. У меня есть это, которое работает, если я добавляю после загрузки страницы, но не раньше:

  {orderlines instanceof Array amp;amp; orderlines.map(order =>
              order.OrderLines.OrderLine instanceof Array amp;amp; order.OrderLines.OrderLine.map(line => {
                if (line.quantity != line.checkedIn) {
                  const item = items.find(item => item.itemID === line.itemID)
                  console.log(items)
                  return (
                    <tr>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.orderID}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.refNum}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.orderedDate.slice(0, 10)}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.quantity}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.checkedIn}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{item.itemID}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{item.customSku}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{item.description}</td>
                    </tr>)
                }
              }))}

Кажется, что items не содержит данных, которые мне нужны при запуске кода.

И она работает. Спасибо за помощь!

 const OrderLines = (props) => {
  const { orderlines } = props
  const { items } = props

  if (orderlines === undefined) {
    return (
      <div className="ml-12 mt-8 uppercase text-2x font-bold">No Outstanding Orders</div>
    )
  }

  if (orderlines instanceof Array) {
    return (
      <div className="bg-white">
        <table className="min-w-full mx-12 divide-y divide-gray-200">
          <thead>
            <tr>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Ref</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Date</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Ordered</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Checked In</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Item ID</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">SKU</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">ITEM DESCRIPTION</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {orderlines instanceof Array amp;amp; orderlines.map(order =>
              order.OrderLines.OrderLine instanceof Array amp;amp; order.OrderLines.OrderLine.map(line => {
                if (line.quantity != line.checkedIn) {
                  const item = items.find(item => item.itemID === line.itemID)
                  console.log(items)
                  if (!item) {
                    return <div>Loading!!!</div>
                  }
                  return (
                    <tr>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.orderID}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.refNum}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.orderedDate.slice(0, 10)}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.quantity}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.checkedIn}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{item.itemID}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{item.customSku}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{item.description}</td>
                    </tr>)
                }
              }))}
          </tbody>
        </table>
      </div>
    )
  }

1. Существует ли соотношение 1-1 между двумя массивами, т. Е. Вы пытаетесь сопоставить их «вместе»? Или вам нужно что-то взять order.OrderLines.OrderLine , чтобы посмотреть в другом массиве? Можете ли вы предоставить примерные значения prop и пример ожидаемого результата?

2. Каждый порядок. Строки порядка. Элемент строки заказа включает идентификатор элемента. Я хочу получить соответствующий объект из массива items, который соответствует ItemId. Каждый объект в элементах имеет ItemId и каждый объект по порядку. Строки порядка. Строка заказа имеет идентификатор элемента. Я хочу извлечь дополнительные данные элемента из массива элементов для отображения в моей таблице вместе с данными строки заказа.

3. Можете ли вы обновить свой вопрос, включив попытку поиска по items массиву, itemId чтобы было понятнее, что вы пытаетесь сделать, где вы это делаете?

Ответ №1:

Вы можете сделать что-то вроде этого. Введите функцию, которая позволяет выполнять поиск по списку элементов, см. search Функцию ниже. Хотя это также может быть достигнуто встроенным.

 
// adding some default values for presentation, in your case you are fetching it from props or state
const orderlines = [
  {itemID: 0, someAttr: 'A'},
  {itemID: 1, someAttr: 'B'},
  {itemID: 2, someAttr: 'C'},
];
// adding some default values for presentation, in your case you are fetching it from props or state
const items = [
  {name: 'somename', itemID: 2},
  {name: 'somename 2', itemID: 3},
  {name: 'somename 3', itemID: 11}
]

function search(id) {
  const result = items.filter(item => item.itemID === id);
  return result amp;amp; result.length ? result[0] : null;
}
orderlines.forEach(order => {
  console.log(order.itemID);
  const found = search(order.itemID);
  if(found) {
    console.log('print row', order, found)
  };
});

Обновить

Для удобства обратитесь к https://repl.it/repls/SturdyLiquidUsers#index.js

Грубо говоря, ваш код должен быть обновлен примерно до следующего

 const OrderLines = (props) => {
  const { orderlines } = props
  const { items } = props
  
  function search(id) {
    const result = items.filter(item => item.itemID === id);
    return result amp;amp; result.length ? result[0] : null;
  }

  console.log(items)

  if (orderlines === undefined) {
    return (
      <div className="ml-12 mt-8 uppercase text-2x font-bold">No Outstanding Orders</div>
    )
  }

  if (orderlines instanceof Array) {
    return (
      <div className="bg-white">
        <table className="min-w-full mx-12 divide-y divide-gray-200">
          <thead>
            <tr>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Ref</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Order Date</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Ordered</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Qty Checked In</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">SKU</th>
              <th className="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">ITEM DESCRIPTION</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {orderlines instanceof Array amp;amp; orderlines.map(order =>
              order.OrderLines.OrderLine instanceof Array amp;amp; order.OrderLines.OrderLine.map(line => {
                const found = search(order.itemID);
                if (line.quantity != line.checkedIn) {

                  return (
                    <tr>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.orderID}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.refNum}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{order.orderedDate.slice(0, 10)}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.quantity}</td>
                      <td className="px-6 py-4 whitespace-no-wrap">{line.checkedIn}</td>
                  <td className="px-6 py-4 whitespace-no-wrap">{
                      found amp;amp; <span>{found}</span>
                  }</td>
                    </tr>)
                }

              }))}
          </tbody>
        </table>
      </div>
    )
  }

1. Зачем фильтровать, когда вы можете проще просто return items.find(item => item.itemID === id) и исключить нулевую проверку и троичный?

2. return items.find(item => item.ItemId === id), это близко к тому, что я пытался сделать, но по какой-то причине это не сработало. Я буду продолжать в том же духе.

3. Из вашего комментария получилось, спасибо @DrewReese