给数组增加数据后页面上不显示新数据。

Question

问题，点击按钮给数组增加数据后，页面上不显示新增加的数据，如何修改？

Page({
  data: {
    randomNumber: null,
    myArray: [1,2,3]
  },
  generateRandomNumber: function () {
    for (var i = 0; i < 10; ++i) {
      this.data.myArray.push(Math.random()*100)
    }
    this.setData({
      randomNumber: Math.random()*100
    })
  }
})

====

<!--index.wxml-->
<view class="container"> 
<button bindtap="generateRandomNumber">生成随机数</button> 
<text>生成的随机数为: {{randomNumber}}</text>
<view wx:for="{{myArray}}">
    {{index}} : {{item}}
</view>
</view>

如上图，点击按钮后，页面上只显示数组初始化时的三个数值，不显示新增加的随机数。

Answer 1

问题分析：
在微信小程序中，视图层的更新是依赖于数据的响应式变化的。当修改数据时，需要使用setData方法来通知框架进行视图更新。在给定的代码中，虽然向myArray数组中添加了新的随机数，但并没有正确地使用setData方法来更新与myArray相关的视图。

解决方案：
修改generateRandomNumber函数如下：

generateRandomNumber: function () {
    for (var i = 0; i < 10; ++i) {
        this.data.myArray.push(Math.random() * 100);
    }
    // 使用setData方法同时更新randomNumber和myArray
    this.setData({
        randomNumber: Math.random() * 100,
        myArray: this.data.myArray
    });
}

这里，在向myArray数组添加新元素后，通过setData方法将更新后的myArray重新设置到data对象中，这样框架就能检测到数据的变化并相应地更新视图。同时也更新了randomNumber的值，确保整个页面的状态更新是正确的。