无法映射对象？无法读取未定义的属性“地图”答案

【问题标题】：Cannot map an object ? Cannot read property 'map' of undefined无法映射对象？无法读取未定义的属性“地图”
【发布时间】：2021-09-24 03:55:13
【问题描述】：

所以我目前正在为我的 POS 应用制作收据。

我目前在我的数据库中存储了一个数组： mongodb collection

我想将它们映射到收据页面

function renderTable(orderlist) {
    return (
      <tr className='service'>
        <td className='tableitem'>
          <p className='itemtext'>{orderlist.name}</p>
        </td>
        <td className='tableitem'>
          <p className='itemtext'>{orderlist.qty}</p>
        </td>
        <td className='tableitem'>
          <p className='itemtext'>{orderlist.subtotal}</p>
        </td>
      </tr>
    );
  }



const showReceipt = ({
    values,
    errors,
    touched,
    handleChange,
    handleSubmit,
    isSubmitting,
  }) => {
    return (
      <div id='bot'>
        <div id='table'>
          <table>
            <tbody>
              <tr className='tabletitle'>
                <td className='item'>
                  <h2>Item</h2>
                </td>
                <td className='Hours'>
                  <h2>Qty</h2>
                </td>
              </tr>
              {values.order_list.map((orders) => {
                renderTable(orders.order_list);
              })}
              <tr className='tabletitle'>
                <td />
                <td className='Rate'>
                  <h2>tax</h2>
                </td>
                <td className='payment'>
                  <h2>$419.25</h2>
                </td>
              </tr>
              <tr className='tabletitle'>
                <td />
                <td className='Rate'>
                  <h2>Total</h2>
                </td>
                <td className='payment'>
                  <h2>{values.total}</h2>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div id='legalcopy'>
          {/* <p className='legal'>
            <strong>Thank you for your business!</strong>&nbsp; Payment is
            expected within 31 days; please process this invoice within that
            time. There will be a 5% interest charge per month on late invoices.
          </p> */}
        </div>
      </div>
    );

它目前正在向我显示此错误：

TypeError: 无法读取未定义的属性“地图”

由于某种原因，我无法映射这个特定的对象。

但是，我可以将它们作为字符串返回： JSON.Stringify(orderlist)

我也可以将对象登录到console

无论出于何种原因，我都无法映射它们。我希望函数为每个 Order_list 内容返回一行

【问题讨论】：

请显示values的console.log？
@Viet Here you go
你能说明values是如何定义的吗？
它是从 redux reducer 结果定义的，该结果由 getSingleOrder(id) redux action 调度，该操作从 get API 获取数据

标签： reactjs redux react-hooks point-of-sale receipt

【解决方案1】：

99% 的时间都存在这些问题，您的 values 在某些时候可用，但由于您是从 api 获取它们并且这需要时间，而不是在您的第一次渲染期间。在映射之前，检查values 是否已经设置，否则显示加载指示器。

【讨论】：

你可能是对的，我试图只映射values，它也返回undefined，虽然我想知道为什么返回values.total 工作得很好，而映射values.order_list 返回@ 987654327@。是因为映射需要更多时间吗？如果是这样，我该怎么做才能映射values.order_list？编辑：仅映射values 实际上返回map is not a function

【解决方案2】：

当你调用 api. values.order_list 是您在 reducer 上定义的初始值。所以如果你没有定义order_list的首字母，values.order_list是未定义的。您可以像这样使用可选链接在调用映射之前进行检查。

values.order_list?.map

【讨论】：

谢谢！在使用values.order_list?.map 映射之前检查不会返回任何没有错误的内容。我如何告诉它等到values.order_list 有值，然后执行映射？