小程序獲取雲數據庫集合的數據並顯示在頁面


按理說沒什么毛病,數據確實也從雲函數傳到js里了,但傳不到頁面吖

先貼個代碼,解決了再來更新www

找到問題了!

Promise.all 方法會將多個 Promise 實例,包裝成一個新的 Promise 實例

 

 上圖是返回的數據,可以看出數據路徑是返回集合名稱.result.data,所以只要把js里

success: res => {
  console.log(res)
  this.setData({
    block: res.data
  })
}

改成

success: res => {
    console.log(res)
    this.setData({
        block: res.result.data
    })
},    

下面是原代碼

雲函數:

// 雲函數入口文件
//npm install --save wx-server-sdk
const cloud = require('wx-server-sdk')
cloud.init({env:'start-tally-x3qms'})
const db = cloud.database()
const tally = db.collection('tally')

// 雲函數入口函數
exports.main = async (event, context) => {
  console.log('yun')
  // 先取出集合記錄總數
  const MAX_LIMIT = 100
  const countResult = await tally.count()
  const total = countResult.total
  // 計算需分幾次取
  const batchTimes = Math.ceil(total / 100)
  // 承載所有讀操作的 promise 的數組
  const tasks = []
  for (let i = 0; i < batchTimes; i++) {
    const promise = tally.skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()
    tasks.push(promise)
  }
  // 等待所有
  return (await Promise.all(tasks)).reduce((acc, cur) => ({
    data: acc.data.concat(cur.data),
    errMsg: acc.errMsg,
  }))
}

js:

Component({
  data: {
    block:[]
  },
  methods: {
    onShow: function () {
      console.log('show')
      this.setTallyList()
    },

    setTallyList: function(){
      wx.cloud.callFunction({
        // 雲函數名稱
        name: 'tally',
        // 傳給雲函數的參數
        data: {},
        success: res => {
          console.log(res) // 3
          this.setData({
            block: res.data
          })
        },
        fail: console.error
      })
    },
  }
})

wxml:

<view class="block" wx:for="{{block}}" wx:for-item="block" data-id="{{block._id}}" bindtap="block" wx:key="block">
  <view class="block_main">
    <view class="block_left">
      <view class="block_icon">
      <icon type="success"></icon>
      </view>
      <view class="block_left2">
        <view class="block_left3">
           <view class="block_type">{{block.type}}</view>
          <view class="block_remark">{{block.remark}}</view>
        </view>
        <view class="block_date">{{block.date}}</view>
      </view>
    </view>
    <view class="block_right">
      <view class="block_expend_or_income">{{block.expend_or_income == 'INCOME' ? '+' : '-'}}</view>
      <view class="block_money">{{block.money}}</view>
    </view>
  </view>
  <view class="block_border"></view>
</view>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM