init.engineer icon indicating copy to clipboard operation
init.engineer copied to clipboard

Published 20 hours ago • verified publisher icon init-engineer

審核投票無限轉圈圈

Open xiaoxigua-1 opened this issue 2 years ago • 5 comments

描述錯誤 按了任何排序方法投票那個欄位都會一直轉圈圈沒顯示結果

重現 重現行為的步驟：

  1. 在https://init.engineer/cards/review 這裡
  2. 點擊任何排序方法
  3. 投票那欄就會陷入無限轉圈圈

預期行為 應該要停止轉圈圈行為顯示結果

截圖 image

裝置與環境(請填寫以下訊息):

  • 設備: 垃圾ASUS筆電
  • 操作系統: Ubuntu
  • 瀏覽器: Edge
  • 版本: 98.0.1108.56

xiaoxigua-1 avatar Apr 15 '22 03:04 xiaoxigua-1

更改這個也會轉 image

xiaoxigua-1 avatar Apr 15 '22 03:04 xiaoxigua-1

搜尋完後也是 :cry:

xiaoxigua-1 avatar Apr 15 '22 03:04 xiaoxigua-1

換頁也是

xiaoxigua-1 avatar Apr 30 '22 15:04 xiaoxigua-1

我們相信時機到了，救世主會出現的。

Kantai235 avatar Apr 30 '22 15:04 Kantai235

群眾審核的那個問題是因為我在 Livewire 列表當中塞入了 Vue 元件，理論上應該使用 AlpineJS 才對，但我 AlpineJS 沒有學得很好，所以審核按鈕那邊使用了 Vue 來完成。

這其實有很大的問題，就在於說 Livewire 在重新渲染的時候，其實 Vue 元件完全不知道，這導致於換頁後審核按鈕失靈的問題發生。

然後為什麼會跳 Error 的另外一個問題就是，其實每個審核按鈕的 Vue 元件都是 Call 一個 API 來去查詢資料的，也就是說如果一個頁面當中有 20 篇文章需要審核，那麼這一頁就會有 20 顆 Vue 元件去渲染審核按鈕，並且呼叫 20 次 API 去抓資料，來完成這 20 篇文章的審核按鈕。

所以當他還在呼叫 API 的時候，你執行了其他的動作，就 JS 的生命週期而言，就是直接中斷當前任務，因此跑到了 cache 而跳出了 error 的 message 給使用者。

所以這個問題我要 assign 給 @SmoothieNoIce 來拯救我

Kantai235 avatar Apr 30 '22 16:04 Kantai235