【原创】react+antdesign接口返回为数字，前台展示中文，如何实现

1、循环列表中某个字段，接口返回为数字，前台要展示对应的中文，该怎么实现呢

如下，各数字，分别对应

1，预约中
2，未开始
3，进行中
4，已结束
5，预约失败

首先，将列表中，每行的接口响应，赋值给listData

listData循环取值，将其中的mStatus循环赋下中文值

<div>
{
  listData?.map((item, index) => {
	let mStatus = {
	  '1': ('预约中'),
	  '2': ('未开始'),
	  '3': ('进行中'),
	  '4': ('已结束'),
	  '5': ("预约失败")
	}[item.mStatus];

	return (
	  <div key={index}>
		<div>{mStatus}</div>
	  </div>
	);
  })
}
</div>

2、详情页中某个字段，接口返回为数字，前台要展示对应的中文，该怎么实现呢

首先，定义statusMap

  const statusMap = {
    '1': '预约中',
    '2': '未开始',
    '3': '进行中',
    '4': '已结束',
    '5': '预约失败',
  };

页面读取该字段，data.mStatus为接口里读取的该字段

<p>状态：{statusMap[data.mStatus]}</p>

3、列表页某个字段，接口返回为数字，前台要展示对应的中文，该怎么实现呢

表格字段定义，如下

const columns = [
    {
      title: "状态",
      dataIndex: "mStatus",
      key: "mStatus",
      render(mStatus) {
        let config = {
          '1': '预约中',
          '2': '未开始',
          '3': '进行中',
          '4': '已结束',
          '5': '预约失败',
        }
        return config[mStatus];
      }
    },
];