Sử dụng react-hook và axios để lấy danh sách 100 bài viết từ: jsonplaceholder.typicode.com/posts
- useEffect là 1 hàm, nhận 2 tham số
- Tham số thứ nhất bắt buộc truyền vào là 1 hàm, hàm này để get data
- Sử dụng thư viện axios
- Phương thức: GET
- URL: jsonplaceholder.typicode.com/posts
- Tham số thứ 2 là mảng rỗng để chỉ get data 1 lần
- Tương đương componentDidMount trong class.
// HookFetching.js
import { useState, useEffect } from 'react'
import axios from 'axios'
export default function HookFetching() {
const [posts, setPosts] = useState([])
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then(res => setPosts(res.data))
.catch(err => console.log(err))
}, [])
return (
<ol>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ol>
)
}
Viết code lại tương đương componentDidMount
trong class.
// ClassFetching.js
import { Component } from 'react'
import axios from 'axios'
export default class ClassFetching extends Component {
constructor(props) {
super(props)
this.state = { posts: [] }
}
componentDidMount() {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then(res => this.setState({ posts: res.data }))
.catch(err => console.log(err))
}
render() {
const { posts } = this.state
return (
<ol>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ol>
)
}
}