时间戳

首页 > 解决方案 > TypeError：页面重新呈现后无法读取未定义的属性

javascript - TypeError：页面重新呈现后无法读取未定义的属性

问题描述

我正在尝试将道具传递给另一个组件，但由于某种原因它不会读取它。

这是我用来调用模态组件的父代码

<OrderActionModal
        show={modalShow}
        onHide={() => setModalShow(false)}
        orders={props.orders}
      />

（props.orders 来自另一个父代码）

这是模态组件的子代码

{props.orders[0].status === "open" && (
              <Button
                variant="dark"
                style={{
                  fontSize: "13px",
                  marginRight: 10,
                  marginBottom: 15,
                }}
                onClick={(e) => updateStatusHandler(e, "paid")}
              >
                <motion.div
                  whileHover={{ scale: 1.06 }}
                  whileTap={{ scale: 0.9 }}
                >
                  &nbsp;Konfirmasi Pembayaran
                </motion.div>
              </Button>
            )}

这是结果

结果

我尝试只使用 props.orders.status 但没有结果。通过添加“[0]”，我得到了我想要的结果，但是每次页面重新呈现时，我都会再次收到该错误。

标签： javascriptreactjs

解决方案

{props.orders[0].status === "open" && (

那是失败的代码。当页面重新呈现时，orders[0]未定义，然后简而言之，您正在尝试阅读undefined.status

一个可爱的解决方案是添加?为空检查（我认为它仅适用于 ES2017）

例如，

{props.orders?.[0]?.status === "open" && (
              <Button
                variant="dark"
                style={{
                  fontSize: "13px",
                  marginRight: 10,
                  marginBottom: 15,
                }}
                onClick={(e) => updateStatusHandler(e, "paid")}
              >
                <motion.div
                  whileHover={{ scale: 1.06 }}
                  whileTap={{ scale: 0.9 }}
                >
                  &nbsp;Konfirmasi Pembayaran
                </motion.div>
              </Button>
            )}

或者你可以去老学校做一个内联空检查

{props.orders && props.orders[0] && props.orders[0].status === "open" && (
              <Button
                variant="dark"
                style={{
                  fontSize: "13px",
                  marginRight: 10,
                  marginBottom: 15,
                }}
                onClick={(e) => updateStatusHandler(e, "paid")}
              >
                <motion.div
                  whileHover={{ scale: 1.06 }}
                  whileTap={{ scale: 0.9 }}
                >
                  &nbsp;Konfirmasi Pembayaran
                </motion.div>
              </Button>
            )}

解决方案将导致，undefined因为当执行上述语句时，它看起来像这样 ->

{[] && undefined && ( <Button ... )} 这将导致显示您的情况undefined

如果您不想显示任何内容，则应使用三元运算符。例如：

{props.orders && props.orders[0] && props.orders[0].status === "open" ? (
              <Button
                variant="dark"
                style={{
                  fontSize: "13px",
                  marginRight: 10,
                  marginBottom: 15,
                }}
                onClick={(e) => updateStatusHandler(e, "paid")}
              >
                <motion.div
                  whileHover={{ scale: 1.06 }}
                  whileTap={{ scale: 0.9 }}
                >
                  &nbsp;Konfirmasi Pembayaran
                </motion.div>
              </Button>
            )
: null
}

推荐阅读