react的antd-mobile使用Steps显示物流

antd-mobile的图标，是需要安装依赖的

step如果只有一个步骤是不会展示的，代码里面的标题那块可以看出来

尝试了很多遍测试发现一直不显示，查询后发现是这个组件的本身设置的原因

那么就算你只展示一个那么也要写两个step，第二个去样式里面给隐藏就可以

或者直接改组件的代码，因为他本身逻辑或者样式做了处理，一个步骤条不展示（我懒的去改组件，所以直接写两个隐藏了一个）

import React, { PureComponent } from "react";
import { connect } from "umi";
import { Modal, Steps } from "antd-mobile";
import dayjs from "dayjs";
import classNames from "classnames";
import "./DeliveryInformation.less";
import logisticsImage from "@/common/images/logisticsImage1.png";
import { CheckCircleFill, TruckOutline, CloseOutline } from "antd-mobile-icons";const { Step } = Steps;// 定义状态到状态码的映射
const statusToCode = {delivered: "finish",pending: "wait",transit: "wait",pickup: "wait",expired: "error",undelivered: "error",notfound: "error",exception: "error",
};
const iconStatu = {finish: <CheckCircleFill />,wait: <TruckOutline />,error: <CloseOutline />,
};const statusToName = {delivered: "签收",transit: "运输中",pickup: "包裹已到达当地地点",inforeceived: "取件中",undelivered: "已尝试递送包裹，但由于某些原因而失败",notfound: "查询不到信息",exception: "已退回给发件人",expired: "30天未更新",pending: "新增包裹正在查询中",
};
@connect((state) => ({orderDelivery: state.orderDeliveryNoteList,
}))
export default class extends PureComponent {renderSteps = (items, statusArr) => {const { queryGetTrackingNumberData } = this.props.orderDelivery;const statusMap = statusArr.reduce((acc, status) => {acc[status] = [];return acc;}, {});queryGetTrackingNumberData.forEach((item) => {const {checkpoint_delivery_status: status,tracking_detail: trackingDetail,checkpoint_date: checkpointDate,} = item;if (statusMap[status]) {statusMap[status].push({ trackingDetail, checkpointDate });}});const arrlist = Object.entries(statusMap).map(([title, array]) => ({title,array,}));return arrlist.map((item, inx) => (<><Steps direction="vertical" className="trackebox" key={inx + 1}><Steptitle={statusToName[item.title]}key={inx + 2}status={statusToCode[item.title]}icon={iconStatu[statusToCode[item.title]]}className="stepTitle"/><Step className="isnone" key={inx} /></Steps>{item.array.map((tx, ix) => (<Steps direction="vertical" className="trackebox" key={ix + 1}><Steptitle={tx.trackingDetail}key={ix + 2}icon=""description={dayjs(tx.checkpointDate).format(dateFormat)}/><Step className="isnone" key={inx} /></Steps>))}</>));};render() {const {modalVisible,orderDeliveryNote,queryGetTrackingNumberData,} = this.props.orderDelivery;const statusArr = [...new Set(queryGetTrackingNumberData.map((val, inx) => val.checkpoint_delivery_status)),];if (!orderDeliveryNote) {return;}return (<><div className="expressList">{this.renderSteps(queryGetTrackingNumberData, statusArr)}</div></>);}
}