未捕获的类型错误：无法读取未定义的属性（读取“公司名称”）JS 对象

Question

我在尝试映射数据时遇到问题。 我想要在产品供应商中达到公司名称。 我该如何解决？

{products.map((repo) => (
      <div
        style={{
          backgroundColor: "#c1d3d4",
          marginTop: 50,
          display: "flex",
          flexDirection: "column",
          minWidth: 1000,
          paddingLeft: 50,
          marginLeft: 400,
          paddingRight: 30,
          paddingBottom: 12,
          borderRadius: 15,
        }}
        span={24}
      >
        <p style={{ flex: 1, fontWeight: "bold", fontSize: 26 }}>
          {repo.name}
        </p>

        <p style={{ fontWeight: "bold", fontSize: 14 }}>{repo.supplier.companyName}</p>

        <p style={{ fontWeight: "bold", fontSize: 14 }}>
          {repo.quantityPerUnit}
        </p>
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
            alignContent: "flex-end",
          }}
        >
          <p
            style={{
              fontSize: 20,
              fontWeight: "800",
              color: "green",
              alignSelf: "flex-end",
            }}
          >
            {repo.unitPrice.toFixed(2)}
          </p>
          <Button type="primary" onClick={() => AddCart(repo)}>
            Sepete Ekle
          </Button>
        </div>
      </div>
    ))}

这是错误信息错误

这是数据：

https://northwind.vercel.app/api/products

编辑：

@Tim Roberts 找到了解决方案。 只有一些元素有供应商，而其他元素没有。 当我尝试使用地图时，我收到了错误消息。 我现在知道了。

Answer 1

我认为发生错误是因为在来自 api 的某些数据中，供应商道具不存在。

你的代码

<p style={{ fontWeight: "bold", fontSize: 14 }}>{repo.supplier.companyName}</p>

可能的解决方案

<p style={{ fontWeight: "bold", fontSize: 14 }}>{repo.supplier && repo.supplier.companyName}</p>