微信小程序开发实战-setData字段特别多时怎么办，试试动态遍历字段并提取赋值

本文链接：https://blog.csdn.net/wxb880114/article/details/126616665

概要：

小程序开发过程中，setData的双向绑定是必学的，本文通过对超多字段的动态赋值，深入讲解setData的用法。

需求场景

Page({
    data: {
        p1: !1,
        p2: "",
        p3: "",
        p4: "",
p5: "",

......很多字段


p50:""
},

字段特别的多，小程序设置值的时候有如下方法:

在更改setData下的变量时,直接写key名就可以了的,不用写this.data.属性,如下所示

一、使用key value

Page({
    data:{
        value:'hello'
    }
    this.setData({
    value:'修改的值'
    //错误写法：this.data.value:''
    //注意key的名称一定是data中的名称
})
})
setData的第二个参数是一个回调函数，在页面渲染完后执行。

this.setData({
      value:'hello'
    }, () => { //第二个参数
       console.log("在页面渲染完value后再执行");
    })

二、使用中括号[]

this.setData({                                                            
 
  '对象.属性名'：属性值， 
 
   ['对象.属性名']：属性值，
 
)}

//例子
this.setData({
 
  'obj.newName': '新添加的名字',
 
  'obj.name': '修改成盲盒',
 
  ['obj.height']: ' 修改了30',
 
})

对于上面几十个字段，这么set实在是不能忍，如何处理呢？

三、解决需求问题使用方法二

从接口提取数据后，通过遍历对象，将key 和value 提取

然后使用setData 赋值

直接上代码：

// 请求接口返回 data 对象
const data = e.Data;
const keys = Object.keys(data)


// 遍历key


keys.forEach(function (item,key) {
 n.setData({
    [item] : ddxxData[item]
 });
})