1.应用1【下拉列表去重】
import React from 'react'
export default function knowledgePage() {
state={
types: [], //选项
typede: "都市",//默认值
}
//请求接口的时候,去重处理
getlist() {
axios({
url: "/api/allarticle",
method: "post",
}).then(res => {
//set去重
//分类
let arr2 = new Set();
res.data.data.forEach((v) => {
arr2.add(v.type);
});
console.log(arr2);//结果为对象
//将对象转化为数组
let newArr2 = Array.from(arr2);
console.log(newArr2)
console.log(res)
this.setState({
types: newArr2
})
})
}
return (
<div>
<Select value={this.state.typede} onChange={(e) => this.getValue(e)}>
{
// 遍历option
this.state.types.map((ele, index) => {
return (
<Select.Option key={index}>{ele}</Select.Option>
)
})
}
</Select>
</div>
)
}
2.应用2【城市列表】
useEffect(() => {
const getList = async () => {
let res: any = await api.getCity({ level: 1 }); //获取城市列表数据【level是必传项】
let res2: any = await api.getHot(); //热门城市
console.log(res)
console.log(res2)
//此函数目的:(1)获取首字母,并转化成大写(2)去重处理(3)排序
setCityList((prev: any) => {
//当前定位
//把热门数据变对象
let hot = {
id: 0,
title: "热",
lists: res2.body,
};
//set去重
let arr = new Set();
res.body.forEach((v: any) => {
//字符串toLocaleUpperCase()方法 转大写
// console.log(v.short)
//对首字母进行大写处理
arr.add(v.short[0].toLocaleUpperCase());
});
console.log(arr);//去重后的数据【未排序,是一个对象】
//将对象转化为数组
let newArr = Array.from(arr);
console.log(newArr)
//排序
newArr.sort((a: any, b: any) => {
// 中文排序比较函数localeCompare()
return a.localeCompare(b);
});
prev = newArr.map((v, i) => {
console.log(v)//排序之后的首字母
let lists: any = [];
res.body.forEach((item: any) => {
if (item.short[0].toLocaleUpperCase() === v) {
lists.push(item);
}
});
return {
id: i + 1,
title: v, //字母
lists, //对应城市
};
});
prev.unshift(hot); //将热门推入首位
return [...prev]; //返回拷贝后的完整数组
});
};
getList();
}, []);