技術標籤：小程式小程式es6/es7

問題程式碼

 <input type="text" value="{{searchContent}}" placeholder="{{placeholderContent}}" placeholder-class="placeholder" bindinput="handleInputChange"/>


async handleInputChange(event) {
    // console.log(event);
    // 更新searchContent的狀態資料
    this.setData({
      searchContent: event.detail.value.trim()
    })
    if (isSend) {
      return
    }
    isSend = true;

    let { searchContent, historyList } = this.data;
    // 發請求獲取關鍵字模糊匹配資料
    let searchListData = await request('/search', { keywords: searchContent, limit: 10 });

    ……

    // 函式節流
    setTimeout(() => {
      isSend = false;
    }, 300)

  },
 

原因：由於bindinput方法會自動返回當前input輸入的值，而當bindinput繫結的方法handleInputChange是一個async非同步函式，返回的是promise物件，所以導致輸入框內反顯為[object promise]；

解決方法：handleInputChange函式去掉非同步，在函式內部需要發請求的程式碼重新定義一個async函式呼叫，即可。

handleInputChange(event) {
    // console.log(event);
    // 更新searchContent的狀態資料
    this.setData({
      searchContent: event.detail.value.trim()
    })
    if (isSend) {
      return
    }
    isSend = true;
    this.getSearchList();  //呼叫非同步函式
    // 函式節流
    setTimeout(() => {
      isSend = false;
    }, 300)

  },
  // 獲取搜尋資料的功能函式
  async getSearchList() {
    let { searchContent, historyList } = this.data;
    // 發請求獲取關鍵字模糊匹配資料
    let searchListData = await request('/search', { keywords: searchContent, limit: 10 });
    ……

  },