React hook - useEffect - fetching data P1

React hook - useEffect - fetching data P1

·

2 min read

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
  • 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>
    )
  }
}

Demo online