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

问题再现

今天在写小程序时发现一个问题:由于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. 处理后的数据显示

daixiangcn CSDN认证博客专家 后端开发工程师 产品体验官
中国公民,中共预备党员,CSDN博客专家,本科大四在读。江苏省第四届“互联网+”大学生创新创业大赛二等奖获得者,第二届、第三届微信小程序应用开发大赛全国三等奖、华东赛区二等奖项目作者,微信小程序《约车吗》、《庆云慈善会》、《锋云速检》项目工程师。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页