node.js - 在 React 中，如何显示 API get 请求的结果？

Question

我已经为标准事务应用程序创建了 API(使用 mongoDB 作为数据库)，我为用户、产品和订单创建了 API。我设法使用和显示存储的有关用户和产品的信息，但是，当我尝试遵循相同的代码来显示我的订单(在 mongoDB 集合中共享来自产品和用户的对象)时，我陷入了困境。我知道这与我在 _id 工作时的命名方式 (const { _id, username, useremail, Productname, productsellprice } = order;) 有关。

其他细节:http请求使用= axios；带钩子(Hook)的上下文 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;

我想在一个简单的用户界面卡中显示订单数据。目前只显示order_id

Answer 1

当您在控制台中打印order时，您会得到这个，

Object product: {_id: "5d1a62c40d16f11d94009a7a", name: "Lead18", sellprice: 104} saledate: "2019-07-03T19:08:05.630Z" user: email: "irl1984@yahoo.co.uk" name: "Kevin Kane" _id: "5d1cd8fbc02bc928d83ea109" proto: Object _id: "5d1cfd156cd4673840981c5d" proto: Object OrderItem.js:6 Object product: {_id: "5d1a62c40d16f11d94009a7a", name: "Lead18", sellprice: 104} saledate: "2019-07-03T18:43:14.409Z" user: {_id: "5d1cd8fbc02bc928d83ea109", name: "Kevin Kane", email: "irl1984@yahoo.co.uk"} _id: "5d1cf74207fa3337cceb5e1e" proto: Object

这意味着您正在对象内获取对象。

所以不是这个，

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

您应该使用Destructuring nested objects ,

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

这里我不确定您想要显示哪个_id，如果您想要来自user对象的_id，那么使用这个use:{_id}。