В React, как я могу отобразить результаты запроса API? - PullRequest
Новая
       14

В React, как я могу отобразить результаты запроса API?

1 голос
/ 07 июля 2019

Я создал API для стандартного транзакционного приложения (используя mongoDB для БД), у меня есть API для пользователей, продуктов и заказов. Мне удалось использовать и отобразить информацию, хранящуюся о пользователях и продуктах, однако, когда я пытаюсь следовать тому же коду для отображения моих заказов (который разделяет объекты из продуктов и пользователей в коллекциях mongoDB), я застреваю. Я знаю, что это как-то связано с тем, как я назвал (const {_id, username, useremail, productname, productsellprice} = order;), как _id работает.

Другие детали: использование = axios для запросов http; контекстный API с хуками (useContext, useReducer)

Я новичок во всем этом, так что прости меня, если я пропустил важную информацию. 

import React, { useContext } from 'react';
    import PropTypes from 'prop-types';
    import OrderContext from '../../context/order/orderContext';

    const OrderItem = ({ order }) => {
      const orderContext = useContext(OrderContext);
      const { deleteOrder, setCurrent, clearCurrent } = orderContext;

      const { _id, username, useremail, productname, productsellprice } = order;

      const onDelete = () => {
        deleteOrder(_id);
        clearCurrent();
      };

      return (
        <div className='card bg-light'>
          <h3 className='text-primary text-left'>
            {_id}{' '}
            <span
              style={{ float: 'right' }}
              className={
                'badge ' +
                (productsellprice === 'professional' ? 'badge-success' : 'badge-primary')
              }
            >
              {'£ ' + productsellprice}
            </span>
          </h3>
          <ul className='list'>
            {useremail && (
              <li>
                <i className='fas fa-marker' /> {useremail}
              </li>
            )}
            {productname && (
              <li>
                <i className='fas fa-marker' /> {productname}
              </li>
            )}
          </ul>
          <p>
            <button
              className='btn btn-dark btn-sm'
              onClick={() => setCurrent(order)}
            >Edit
            </button>
            <button className='btn btn-danger btn-sm' onClick={onDelete}>
              Delete
            </button>
          </p>
        </div >
      );
    };

    OrderItem.propTypes = {
      order: PropTypes.object.isRequired
    };

    export default OrderItem;

Я хочу отобразить данные заказа в простой пользовательской карте. В настоящее время он отображает только код_ заказа

1 Ответ

0 голосов
/ 07 июля 2019

Когда вы печатаете order в консоли, вы получаете это,

Объект продукта: {_id: "5d1a62c40d16f11d94009a7a", имя: "Lead18", цена продажи: 104} saledate: "2019-07-03T19: 08: 05.630Z" пользователь: электронная почта: "irl1984@yahoo.co.uk" имя: "Кевин Кейн" _id: "5d1cd8fbc02bc928d83ea109" proto: объект _id: "5d1cfd156cd4673840981c5d" proto: объект OrderItem.js: 6 объектный продукт: {_id: "5d1a62c40d16f11d18ed: sad: name: saa: name: 17a2) 2019-07-03T18: 43: 14.409Z "пользователь: {_id:" 5d1cd8fbc02bc928d83ea109 ", имя:" Кевин Кейн ", электронная почта:" irl1984@yahoo.co.uk "} _id:" 5d1cf74207fa3337cceb5e1e "proto: 100 *

Это означает, что вы получаете объект внутри объекта.

Так что вместо этого, 

const { _id, username, useremail, productname, productsellprice } = order;

Вы должны использовать Уничтожение вложенных объектов , 

const { product:{_id: product_id}, user:{name: username}, user:{email: useremail}, product:{name: productname}, product:{sellprice: productsellprice} } = order;

Здесь я не уверен, какой _id вы хотите показать, если вы хотите _id из user объекта, тогда используйте этот use:{_id}.

...