setData 函数用于将数据从逻辑层发送到视图层怎么实现？

迈不过友情╰ 2024-03-31 16:30 56阅读 0赞

setData 函数用于将数据从逻辑层发送到视图层 （异步），同时改变对应的 this.data 的值（同步）。  
注意：

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。  
仅支持设置可 JSON 化的数据。  
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。  
请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

逻辑层： `index.js`

Page({
        
      data: {
        
        // 3:需在data中声明一个接收数据的变量。
        list: []
      },
      onLoad: function (options) {
        
        wx.request({
        
          url: 'https://unidemo.dcloud.net.cn/api/news',
          header: {
        
            'content-type': 'application/json'
          },
          success: res => {
        
            //1:在控制台打印一下返回的res.data数据
            console.log(res.data)
            //2:在请求接口成功之后，用setData接收数据
            this.setData({
        
              //第一个data为固定用法
              list: res.data
            })
          }
        })
      },
    })

视图层：`index.wxml`

<view class="container">
        <view wx:for="{
         {list}}" wx:key="index">
    		<text class="count">{
       {item.title}}</text>
    	</view>
    </view>

案例二：  
适用于没有定义的数据  
那么在data中定义一个`return`变量，用于渲染已请求到的服务器资源  
不定义item，使用data内的return作为变量和数据字段`{ {return.result}}`  
效果如下：

data: {
        
        return: []
      },

{
        
    	"result": "11108",
    	"resultInfo": "202212131407100798972100101000000",
    	"errorInfo": "SI不存在"
    }

<view class="container">
        <view wx:for="{
         {return}}">
    		<view class="count">处理结果码{
       {return.result}}</view>
    		<view class="count">流水号{
       {return.resultInfo}}</view>
    		<view class="count">错误代码：{
       {return.errorInfo}}</view>
    	</view>
    </view>