使用React Hooks請求資料並渲染

在日常的開發中，從伺服器端非同步獲取資料並渲染是相當高頻的操作。在以往使用react class元件的時候，這種操作我們已經很熟悉了，即在class元件的componentdidmount中通過ajax來獲取資料並setstate，觸發元件更新。

隨著hook的到來，我們可以在一些場景中使用hook的寫法來替代class的寫法。但是hook中沒有setstate、componentdidmount等函式，又如何做到從伺服器端非同步獲取資料並渲染呢？本文將會介紹如何使用react的新特性hook來編寫元件並獲取資料渲染。

先來看乙個資料渲染的簡單demo

import react,
from
'react'
;function()
]});
return
(>
<
/li>))
}<
/ul>);
}export

但現在是寫死的乙個資料，如果我們期望從伺服器端獲取資料並渲染，那麼就需要在元件渲染完成時fetch服務端資料，然後通過setdata去改變state觸發渲染。我們接下來準備用axios來獲取資料。

import react,
from
'react'
;import axios from
'axios'
;function()
]});
useeffect
(async()
=>);
return
(>
<
/li>))
}<
/ul>);
}export

**中使用到的useeffect就是hook的其中一種，叫effect hook。useeffect會在每次元件渲染的時候觸發，我們使用它來獲取資料並更新state。但是上面的**是有缺陷的，你發現了嗎？

沒錯，只要你執行一下，你就會發現程式進入了乙個死迴圈。因為useeffect不僅在元件didmounts的時候被觸發了，還在didupdate的時候被觸發了。在useeffect中獲取資料後，通過setdate改變state，觸發元件渲染更新，從而又進入到了useeffect中，無限迴圈下去。這並不是我們想要的結果。我們最初想要的，只是希望在didmounts的時候獲取一次資料而已。所以，這種情況下，我們必須要給useeffect方法的第二個引數傳入乙個空，以使得useeffect中的邏輯只在元件didmounts的時候被執行。

import react,
from
'react'
;import axios from
'axios'
;function()
]});
useeffect
(async()
=>,[
]);//重點
return
(>
<
/li>))
}<
/ul>);
}export

雖然看起來這個錯誤比較低階，但確實比較多人在新上手hook時常常犯的問題。

當然，useeffect第二個引數，也可以傳入值。當如果有值的時候，那useeffect會在這些值更新的時候觸發。如果只是個空陣列，則只會在didmounts的時候觸發。

另外，執行這段**，你會看到控制台警告，promises and useeffect(async () => ...) are not supported, but you can call an async function inside an effect.。所以如果要使用async，需要修改下寫法。

import react,
from
'react'
;import axios from
'axios'
;function()
]});
useeffect((
)=>
fetchdata()
;},[
]);return
(>
<
/li>))
}<
/ul>);
}export

一般的應用在某些請求過程的互動設計上，會加上loading來緩解使用者焦慮。那在hook的寫法中，如何實現呢？下面將會介紹。

import react,
from
'react'
;import axios from
'axios'
;function()
]});
const
[isloading, setisloading]
=usestate
(false);
useeffect((
)=>
fetchdata()
;},[
]);return
(>
<
/li>))
}<
/ul>)}
;}export

這裡通過加入乙個叫isloading的state來實現。我們在fetch的開始和結束去改變isloading的值，來控制return返回的元件內容，從而在請求前顯示loading元件，在請求後顯示產品列表。

請求的過程經常會由於各種原因失敗，比如網路、伺服器錯誤等等。所以錯誤處理必不可少的。

import react,
from
'react'
;import axios from
'axios'
;function()
]});
const
[isloading, setisloading]
=usestate
(false);
const
[iserror, setiserror]
=usestate
(false);
useeffect((
)=>
catch
(e)setisloading
(false);
}fetchdata()
;},[
]);return
(>
<
/li>))
}<
/ul>)}
;<
/div>
}export

當請求出錯時，iserror會被設定為true，觸發渲染時，錯誤提示元件就會被渲染出來。這裡的處理比較簡單，在真實場景中，你可以在錯誤處理時加入更複雜的邏輯。iserror會在每次hook執行的時候被重置。

讀到這你已經基本學會了如何使用react hooks獲取資料並渲染元件了。

使用React Hooks請求資料並渲染

C 使用WebRequest類請求資料

使用load 方法非同步請求資料

C winform post請求資料

使用React Hooks請求資料並渲染

C 使用WebRequest類請求資料

使用load 方法非同步請求資料

C winform post請求資料

相關推薦