Question

所以我目前正在为我的 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: 无法读取未定义的属性 'map'

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

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

我也可以在 console 中记录对象

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

Answer 1

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

Answer 2

当你调用 api. values.order_list 是您在减速器上定义的初始值。因此，如果您未定义 order_list 的首字母，则 values.order_list 未定义。您可以像这样使用可选链在调用映射之前进行检查。

values.order_list?.map

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

2 个答案: