解决分析bug能力提高篇之（小程序Picker滚动选择器数据错乱的问题 一）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

课程口号

同为程序猿，我想要手环，希望大家多多 评论 点赞 收藏 🙏🙏🙏

课程背景

• 程序员嘛，最开心的就是每天复制粘贴cv cv cv cv的，轻车熟路的整点业务。
• 但是当偶尔遇到一些bug，那可就让人挠头了。
• 甲方姥爷提出新的需求:小程序注册的用户需要绑定一个客服，但是为了防止每次都选择第一个客服，那么客服的列表就要每次都随机排序。
• 前端小菜5分钟搞完上线了。好家伙，一会儿CTO就来把我们骂了一顿。选的张三，实际上是李四，选的李四，实际上是万五

情景复现

1. 接口随机返回客服列表

    <?php
/**
 * [随机获取客服列表] 
 * Author Liiy. 
 * Date 2022/03/31. 
 * Time 15:23. 
 */

$staff = [
    ['id'=>1,"name"=>"客服001"],
    ['id'=>2,"name"=>"客服002"],
    ['id'=>3,"name"=>"客服003"],
    ['id'=>4,"name"=>"客服004"],
    ['id'=>5,"name"=>"客服005"],
    ['id'=>6,"name"=>"客服006"],
    ['id'=>7,"name"=>"客服007"],
    ['id'=>8,"name"=>"客服008"]
];
shuffle($staff);
echo json_encode(['code'=>200,'msg'=>'ok','data'=>$staff]);

每次请求的数据都是无序的。

2 现象演示

当我选择一个客服的时候，选择的客服跟选择的id根本就对应不起来。

3 示例代码 index.wxml

<picker 
	bindchange="bindPickerChange_hx" 
	value="{{ index }}" 
	range-key="name" 
	range="{{ array }}" 
	class="option"
	>
    <button type="primary" bindtap="updat">变更客服专员></button>
</picker>

index.js

Page({
    data: {
        array:[],
        index:0
    },
    bindPickerChange_hx(e){
        //保存索引
        this.setData({   
            index: e.detail.value, 
         })
         console.log('选择的客服id',this.data.array[e.detail.value].id)
    },
    updat(){
        let _this = this
        wx.request({
            url: 'http://hz.shanxi.com/test.php', //仅为示例，并非真实的接口地址
            data: {},
            header: {
                'content-type': 'application/json' // 默认值
            },
            success (res) {
                _this.setData({
                array:res.data.data
                })
            }
            })
    },
    onLoad(){
        this.updat()
    }
})

代码也是很简单，小程序官方标准的 picker用法。

篇幅有限，下一章节我们继续进行问题的分析