Ở phần 1, chúng ta đã tìm hiểu về trường hợp đầu tiên sử dụng useEffect, cùng hiểu tại sao phải sử dụng tham số thứ 2 trong useEffect. Trong
phần này chúng ta sẽ tìm hiểu rõ hơn.
Để có thể xử lý vấn đề api call liên tục k dừng ở phần 1, bạn chỉ cần thêm tham số thứ 2 trong useEffect có thể là 1 mảng rỗng []
hoặc 1 mảng có giá trị [post…]
1
2
3
4
5
6
7
8
9
|
useEffect(
() =>{
fetch('https://jsonplaceholder.typicode.com/posts')
.then(res => res.json())
.then(posts =>{
setPosts(posts)
})
},[]
)
|
Vậy trong trường hợp dependency array không phải mảng rỗng thì sao?
Nếu mảng này có phần tử, mỗi khi giá trị của phần tử thay đổi, call back của useEffect sẽ được gọi lại. Ví dụ trong đoạn code này mình sẽ sửa lại 1 chút như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
import { useEffect } from "react";
import {useState} from "react";
const tabs = ['posts','comments','albums']
function Content() {
const [title, setTitle] = useState('')
const [posts, setPosts] = useState([])
const [types, setTypes] = useState(['posts'])
useEffect(
() =>{
console.log('title changed')
document.title = title;
fetch(`https://jsonplaceholder.typicode.com/${types}`)
.then(res => res.json())
.then(posts =>{
setPosts(posts)
})
},[types]
)
return (
<div>
{tabs.map(tab => (
<button
style={types ===tab ? {
color : '#fff',
backgroundColor : 'black'
} : {
coler : 'fff',
backgroundColor : 'blue'
}}
key={tab}
onClick={() =>setTypes(tab)}
>{tab}</button>
))}
<input
value={title}
onChange={(e)=> setTitle(e.target.value)} z
/>
<ul>
{posts.map(post =>(
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
)
}
export default Content
|
Mình đã thêm 3 button, khi click vào từng button sẽ gọi API tương ứng, để có thể làm được điều này mình đã thêm 1 state là types, mỗi
khi click vào từng button, mình sẽ dùng useState để set lại giá trị tương ứng, khi có giá trị rồi mình sẽ truyền vào API để call.
Như vập sau khi giá trị của types thay đổi, callback của useEffect sẽ được gọi lại.
Ở phần tiếp theo chúng ta sẽ tìm hiểu về useEffect với listen DOMEvent nhé! 😃
