出现错误：无法读取未定义的属性（读取“长度”）

Question

我在这段代码中收到“无法读取未定义的属性（读取‘长度’）”这个错误，尽管我什至没有使用任何长度。谁能帮我。 另一个问题是我从映射中删除了“products&&”然后它显示 “无法读取未定义（地图）的属性。我该怎么办？

import React from "react";
import "../../styles/Slide.css";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import { products } from "../home/Productdata";
import { Divider } from "@mui/material";


const responsive = {
  superLargeDesktop: {
    breakpoint: { max: 4000, min: 3000 },
    items: 5,
  },
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3,
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
  },
};

const Slide = () => {
  return (
    <div className="products_section">
      <div className="products_deal">
        <h3>Deal of The Day</h3>
        <button className="vie_btn">view All</button>
      </div>
      <Divider />
      <Carousel
        responsive={responsive}
        infinite={true}
        draggable={false}
        swipeable={true}
        centerMode={true}
        autoPlay={true}
        autoPlaySpeed={4000}
        keyBoardControl={true}
        showDots={false}
        removeArrowOnDeviceType={["tablet", "mobile"]}
        dotListClass="custom-dot-list-style"
        itemClass="carousel-item-padding-40-px"
        containerClass="carousel-container"
      >
        {products &&
          products.map((e) => {
            return (
              
              <div className="products_items">
                <div className="product_img">
                  <img src={e.url} alt="product" />
                </div>
                <p className="products_name">{e.title.shortTitle}</p>
                <p className="products_offer" style={{ color: "#  007185" }}>
                  {e.discount}
                </p>
                <p className="products_explore">{e.tagline}</p>
              </div>
             
            );
          })}
      </Carousel>
    </div>
  );
};

export default Slide;

Answer 1

{产品&& 产品?.map((e) => { 回归（

          <div className="products_items">
            <div className="product_img">
              <img src={e.url} alt="product" />
            </div>
            <p className="products_name">{e.title.shortTitle}</p>
            <p className="products_offer" style={{ color: "#  007185" }}>
              {e.discount}
            </p>
            <p className="products_explore">{e.tagline}</p>
          </div>
         
        );
      })}

使用可选链接？。在产品之后。有关更多信息，请参阅 [https://javascript.info/optional-chaining][1]