微信小程序:如何用setData修改数组?

etianqq
  • 648

学习微信小程序的小白一枚,在操作array更新时,遇到问题:
html如下:

<view class="todo-item" wx:for="{{todos}}" bindtouchend="showDeleteBtn" id="{{index}}">
            ...
      <icon type="clear" color="red" hidden="{{item.isDelete? false: true}}"></icon>
</view>

JS如下:

Page({
  data: {
    todos: [{id: 0, text:'abc', isDelete: false}]
  },
  //事件处理函数
  ...
  showDeleteBtn: function(event){
    var index = event.currentTarget.id;
    var deletedTodo = "todos["+index+"].text";
    this.setData({
       deletedTodo: true
    });
  }
})

根据文档,如果修改array里面某个具体值,是可以采用'array[0].text':'changed data'这种格式的:
图片描述

可为什么在我的例子里面,isDelete属性值就是不会被修改呢?
到底程序错在那里?
求大神解答,万分感谢!!!

回复
阅读 71k
8 个回答

这样试试:

showDeleteBtn: function(event)
{
    var index = event.currentTarget.id;
    this.data.todos[index].isDelete = true;
    this.setData(
    {
       todos: this.data.todos
    });
)

key只需要用中括号括起来就变成变量啦,如

this.setData({
       [deletedTodo]: true
    });

按你的方式,修改,代码如下:
图片描述
通过表达式生成的key值,并没有生效,setData方法还是将变量的名称而不是变量指向的值作为key值。可以看下,AppData中的数据,如下,是生成了一个deletedTodo的属性:

图片描述

解决方法是先通过index取出数组中的目标元素,然后对这个目标元素的属性进行修改。此时,则可以进行修改,如下所示:
图片描述

你 deletedTodo 找的字段是 text 而不是 isDelete

this.replaceDataOnPath(['todos', indexToUpdate, 'isDelete'], true);
this.applyDataUpdates();

来自官方文档,Component构造器

使用 setTimeout

   let todoList = this.data.todoList
   todoList.splice(todoIndex, 1)
   setTimeout(()=>{
        this.setData({
            todoList
           })
   }, 100)
你知道吗?

宣传栏