set方法使用

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();
  }, []);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值