TypeError：无法读取 React Map 中未定义的属性“地图”答案

【问题标题】：TypeError: Cannot read property 'map' of undefined in React MapTypeError：无法读取 React Map 中未定义的属性“地图”
【发布时间】：2021-08-23 12:47:23
【问题描述】：

我用react创建了一个电子商务网站，页面之间重定向时出错问题：当想要从类别页面重定向到 SingleProduct 页面时，出现错误“无法读取未定义的 .map”，但刷新页面时，可以看到该页面。此外，当想要从 SingleProduct 页面重定向到主页时也是如此。下面的代码来自 Category Page 。在 usequery 中，我在返回函数中使用 isloading 和 iserror 和 isSuccess，如下所示

const {
    isLoading,
    isError,
    error,
    data: res,
    isSuccess,
  } = useQuery("product", () => Axios.get(`/Product/AllProduct`));
  
  
  // spinner when data loads
  if (isLoading) {
    return (
      <Col className="text-center" md="12">
        <div className="uil-reload-css reload-background mr-1 align-center">
          <div className="" />
        </div>
      </Col>
    );
  }
  if (isError) {
    return (
      <div>
        <h1 className="title text-center">
          {error.message}
          <br />
          <p className="error-msg text-center">
            We&apos;;re sorry, There is an error encounter.
            <br />
            Please retry again after few minutes.
          </p>
        </h1>
      </div>
    );
  }

 {isSuccess &&
          res.data.Result.map((product) => (
            <Col key={product.ID} md="4" sm="4">
              <Card className="card-product card-plain">
                <div className="card-image">
                  <img
                    alt={product.Name}
                    className="img-rounded img-responsive"
                    src={`/api/v1/ProductFile/${encodeURIComponent(
                      product.ID
                    )}/Product/${encodeURIComponent(product.ProductImages[0])}`}
                  />
              </Card>

【问题讨论】：

Map 仅适用于数组类型，不适用于任何其他类型。检查一次是否仅在数组上使用 .map()。
你能在这里分享响应结构吗？

标签： javascript reactjs react-redux react-hooks

【解决方案1】：

在 map 之前使用条件运算符，如下所示：

{isSuccess && res && res.data && res.data.Result && res.data.Result.map((product) => (

或可选链接：

{isSuccess && res?.data?.Result?.map((product) => (

【讨论】：

【解决方案2】：

在 axios 中，您可以使用 res.data 来定位响应，也许这就是您错过的内容。

【讨论】：