微信小程序 入坑 关于picker组件的使用，后台数据调用

最近写的关于城市联动代码，测试了好多，总是出问题，希望后面的兄弟注意

前端XML文件

<view class="section">
      <picker bindchange="bindPickerChangeshengArr" value="{{shengIndex}}" range="{{shengArr}}" data-id="{{shengId[shengIndex]}}">
        <view class="picker">
          选择省份：{{shengArr[shengIndex]}}
          <input hidden="true" name="province" value="{{shengArr[shengIndex]}}"/>
        </view>
      </picker>
    </view>
    <view class="section">
      <picker bindchange="bindPickerChangeshiArr" value="{{shiIndex}}" range="{{shiArr}}">
        <view class="picker">
          选择城市：{{shiArr[shiIndex]}}
          <input hidden="true" name="city" value="{{shiArr[shiIndex]}}"/>
        </view>
      </picker>
    </view>
    <view class="section">
      <picker bindchange="bindPickerChangequArr" value="{{quIndex}}" range="{{quArr}}">
        <view class="picker">
          选择地区：{{quArr[quIndex]}}
          <input hidden="true" name="town" value="{{quArr[quIndex]}}"/>
        </view>
      </picker>
    </view>

后端调用数据省的触发数据

bindPickerChangeshiArr: function (e) {
    this.setData({
      shiIndex: '11',
      quArr:[],
      quiId: []
    })
    let getcitid = e.detail.value;
    console.log("chengshiss", getcitid);
    var that = this;
    wx.request({
      url: app.d.hostUrl + '/ajax/xcxAjax.ashx?MID=5&cityname=' + getcitid + '&classid=3',
    
      method: 'get', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {// 设置请求的 header
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        var status = res.data.total;
        var area = res.data.rows;

        var qArr = [];
        var qId = [];
        qArr.push('请选择');
        qId.push('0');
        for (var i = 0; i < area.length; i++) {
          qArr.push(area[i].area)
          qId.push(area[i].area)
        }
        that.setData({
          city:0,
          quArr: qArr,
          quiId: qId
        })
      },
      fail: function () {
        // fail
        wx.showToast({
          title: '网络异常！',
          duration: 2000
        });
      }
    })
  },

后台获取数据是 let getcitid = e.detail.value;

这时候就会发现获取的值始终是数字，前端就会看到value的变化

获取的value 是以下标的形式出现，因此后台调取的时候以下标重新获取数据才可以

picker-view 中设置value，展示我想要的下标值，就必须在data里设置你的数组，不能再次赋值