老师，引用 ProductList 组件之后报错

ShoppingCart.tsx

import React from "react";
import styles from './ShoppingCartPage.module.css';
import { MainLayout } from "../../layouts/mainLayout";
import { Row, Col, Affix } from "antd";
import { ProductList, PaymentCard } from "../../components";
import { useSelector } from '../../redux/hooks';
import { useDispatch } from "react-redux";
import { clearShoppingCart } from "../../redux/shoppingCart/slice";

export const ShoppingCartPage : React.FC = () => {
  const loading = useSelector(s => s.shoppingCart.loading);
  const shoppingCartItems = useSelector(s => s.shoppingCart.items);
  const jwt = useSelector(s => s.user.token);
  const dispatch = useDispatch();

  // console.log('shoppingCartItems', shoppingCartItems.map(s => s.touristRouteId));
  // console.log('shoppingCartItems', shoppingCartItems);

  return (
    <MainLayout>
      <Row>
        {/* 购物车清单 */}
        <Col span={16}>
          <div className={styles["product-list-container"]}>
            <ProductList data={shoppingCartItems.map(s => s.touristRouteId)} />
          </div>
        </Col>
        {/* 支付卡组件 */}
        <Col span={8}>
          <Affix>
            <div className={styles["payment-cart-container"]}>
              <PaymentCard
                loading={loading}
                // 原价 originalPrice ➡ 为所有线路的总价
                originalPrice={shoppingCartItems
                  .map(s => s.originalPrice)
                  .reduce((a, b) => a + b, 0)}
                // 折扣过后的价格
                price={shoppingCartItems
                  .map(
                    s => s.originalPrice *
                    (s.discountPresent ? s.discountPresent : 1)
                  )
                  .reduce((a, b) => a + b, 0)}
                // 用户点击下单按钮处理事件 onCheckout
                onCheckout={() => {
                 
                }}
                // 清空购物车事件 
                onShoppingCartClear={() => {
                  dispatch(clearShoppingCart({jwt, itemIds: shoppingCartItems.map(s => s.id)}))
                }}
              />
            </div>
          </Affix>
        </Col>
      </Row>
    </MainLayout>
  )
}

ProductList.tsx

import React from "react";
import { Link } from "react-router-dom";
import { List, Rate, Space, Image, Tag, Typography } from "antd";
import { MessageOutlined, LikeOutlined, StarOutlined } from "@ant-design/icons";

const { Text } = Typography;

interface Product {
  departureCity: string;
  description: string;
  discountPresent: number;
  id: string;
  originalPrice: number;
  price: number;
  rating: number;
  title: string;
  touristRoutePictures: any[];
  travelDays: string;
  tripType: string;
}
interface PropsType {
  data: Product[] | string[];
  paging?: any; // 修改为可选参数
  onPageChange?: (nextPage, pageSize) => void;
}

const listData = (productList: Product[] | string[]) =>
  productList.map((p) => ({
    id: p.id,
    title: p.title,
    description: p.description,
    tags: (
      <>
        {p.departureCity && <Tag color="#f50">{p.departureCity}出发</Tag>}
        {p.travelDays && <Tag color="#108ee9">{p.travelDays} 天 </Tag>}
        {p.discountPresent && <Tag color="#87d068">超低折扣</Tag>}
        {p.tripType && <Tag color="#2db7f5">{p.tripType}</Tag>}
      </>
    ),
    imgSrc: p.touristRoutePictures[0].url,
    price: p.price,
    originalPrice: p.originalPrice,
    discountPresent: p.discountPresent,
    rating: p.rating,
  }));

const IconText = ({ icon, text }) => (
  <Space>
    {React.createElement(icon)}
    {text}
  </Space>
);

export const ProductList: React.FC<PropsType> = ({
  data,
  paging,
  onPageChange,
}) => {
  const products = listData(data);
  return (
    <List
      itemLayout="vertical"
      size="large"
      pagination={
        // 判断是否传入 paging
        paging
        ? {
            current: paging.currentPage,
            onChange: (page) => onPageChange && onPageChange(page, paging.pageSize),
            pageSize: paging.pageSize,
            total: paging.totalCount,
          }
        : false
      }
      dataSource={products}
      footer={
        /* 有且只有 paging 不为空时才显示 footer */
        paging && (
          <div>
            搜索总路线: <Text strong>{paging.totalCount}</Text> 条
          </div>
        )
      }
      renderItem={(item) => (
        <List.Item
          key={item.title}
          actions={[
            <IconText
              icon={StarOutlined}
              text="156"
              key="list-vertical-star-o"
            />,
            <IconText
              icon={LikeOutlined}
              text="156"
              key="list-vertical-like-o"
            />,
            <>
              <Rate defaultValue={3} />
              <Text strong className="ant-rate-text">
                {item.rating}
              </Text>
            </>,
          ]}
          extra={
            <Image width={272} height={172} alt="image" src={item.imgSrc} />
          }
        >
          <List.Item.Meta
            title={
              <>
                {item.discountPresent ? (
                  <>
                    <Text style={{ fontSize: 20, fontWeight: 400 }} delete>
                      ¥ {item.originalPrice}
                    </Text>
                    <Text
                      type="danger"
                      style={{ fontSize: 20, fontWeight: 400 }}
                    >
                      {" "}
                      ¥ {item.price}
                    </Text>
                  </>
                ) : (
                  <Text style={{ fontSize: 20, fontWeight: 400 }}>
                    ¥ {item.price}
                  </Text>
                )}
                <Link to={"/detail/" + item.id}> {item.title}</Link>
              </>
            }
            description={item.tags}
          />
          {item.description}
        </List.Item>
      )}
    />
  );
};

我输出了 ShoppingCart 传递过来的 props 是这样的：

但是 data 要经过 listData 方法进行数据转换再输出的：

const listData = (productList: Product[] | string[]) =>
  productList.map((p) => ({
    id: p.id,
    title: p.title,
    description: p.description,
    tags: (
      <>
        {p.departureCity && <Tag color="#f50">{p.departureCity}出发</Tag>}
        {p.travelDays && <Tag color="#108ee9">{p.travelDays} 天 </Tag>}
        {p.discountPresent && <Tag color="#87d068">超低折扣</Tag>}
        {p.tripType && <Tag color="#2db7f5">{p.tripType}</Tag>}
      </>
    ),
    imgSrc: p.touristRoutePictures[0].url,
    price: p.price,
    originalPrice: p.originalPrice,
    discountPresent: p.discountPresent,
    rating: p.rating,
  }));

然后，上面可以看到 data 的属性是一个包含 3 个 ID 值的字符串类型的数组，并不能使用 listData 的方法进行转换啊

ShoppingCart组件中传的data数据不对，应该是整个数据，不能只传id值