微信小程序数组修改后渲染到前端

问题再现

今天在写小程序时发现一个问题：由于C#特性，数据类型没有Date类型，所以取出来的数据想要显示成Date还必须自己再处理。由于后端用的linq查询，不支持在查询语句里使用函数，于是我的解决方案是数据拿到前端用js的substr()函数进行处理，处理前的前端效果如图1所示。

图1. 处理前的数据显示

要想动态修改数据就必须使用setData，但新手使用setData就容易遇到如下所示的问题（标红，报错）：

解决方案

在修改数组和对象的时候就直接将要修改的参数名写成对应字符串就可以了，然后使用[]将字符串括起来，示例代码如下：

// 组建string字符串
var aa = "classlist[" + i + "].date";
// 将组建的字符串放入方括号，进行再次赋值
that.setData({
  [aa]: “2020-12-12“
})

复杂一点需要遍历数组的，代码如下所示。

// 初次给数组赋值
that.setData({
  classlist: JSON.parse(res.data.data.classlist),
});
// 打印数组长度
console.log("that.data.classlist.length:" + that.data.classlist.length);
// 遍历数组修改数组的值（再次赋值）
for (var i = 0; i < that.data.classlist.length; i++) {
  var aa = "classlist[" + i + "].date";
  // 打印修改前数组中date的值
  console.log("that.data.classlist[" + i + "].date:" + that.data.classlist[i].date);
  // 使用setData再次赋值，即时渲染到前端
  that.setData({
    [aa]: that.data.classlist[i].date.substr(0, 10)
  })
  // 打印修改后数组中date的值
  console.log("that.data.classlist[" + i + "].date:" + that.data.classlist[i].date);
}

这样修改完成后，修改后的数组数据就可以渲染到前端了，效果如图2所示。

图2. 处理后的数据显示