HTTP requests là một trong những side-effect
thường gặp trong một website. Nó cũng tương tự các side-effect khác như tương tác với DOM
hay localStorage
. Các side-effect chúng ta có thể xử lý bên trong useEffect
callback. Hook này đảm bảo rằng mỗi khi có sự thay đổi trong component, các side-effect được chạy lại.
Một lưu ý rằng bạn không thể return bất cứ giá trị nào trong useEffect
ngoại trừ hàm để cleanup
. Và một điều thú vị là:
// code này sẽ ko chạy, đừng sử dụng nó
React.useEffect(async () => {
const result = await doSomeAsyncThing()
// do something ...
})
Lý do code ở trên không chạy là do khi callback function trong useEffect
là một async
thì mặc định nó sẽ return về promise. Đây là cú pháp của async/await
. Cho nên nếu bạn muốn sử dụng async/await, bạn có thể làm như sau:
React.useEffect(() => {
async function effect() {
const result = await doSomeAsyncThing()
// do something with the result
}
effect()
})
Điều này chắc rằng bạn ko return một giá trị trong useEffect
callback ngoại trừ cleanup function.
Hay bạn có thể viết như sau:
React.useEffect(() => {
doSomeAsyncThing().then(result => {
// do something with the result
})
})
Tuỳ thuộc vào bạn chọn cách viết như thế nào. Ví dụ về gọi HTTP request bên trong useEffect. Mình sử dụng axios để gọi API:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ hits: [] });
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'https://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
};
fetchData();
}, []);
return (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
);
}
export default App;
thaunguyen.com via Epic React by Kent C.Dodds
hey
great!
Oh no
hơi ngắn