Yêu cầu thg 4 24, 2019 2:38 SA 929 0 1
  • 929 0 1
0

[ReactJS] Call API trong ComponentDidMount()

Chia sẻ
  • 929 0 1

Chaof mọi người, mình đang làm Rect và gặp phải issue này mong ae giúp đỡ. Mình đang demo web bán hàng, trong đó tất nhiên sẽ có trang chi tiết SP gồm có :

  • Thông số về SP
  • Các SP liên quan

Và để hiển thị được 2 phần trên mình sẽ gọi 2 API để lấy data về trong ComponentDidMount() Tuy nhiên khi vào trong trang chi tiết, nếu người dùng click xem SP liên quan thì ko đc, vì API trong ComponentDidMount() không được gọi lại.

Tạm thời mình khắc phục bằng cách gọi thêm API trong sự kiện Click khi người dùng nhấn vào SP. Nhưng mình thấy cách này hơi cùi cùi ...

Chắc hẳn nhều bạn cũng gặp phải tình huống này rồi, không biết mọi người xử lý case này bằng cách nào ạ ?

Avatar Dao Thai Son @dao.thai.son
thg 4 24, 2019 2:42 SA

Nếu bạn tách phần chi tiết sp thành 1 component nhỏ hơn, thì bạn pass dữ liệu vào component chi tiết sp đó qua props luôn đi

Avatar Hoang vn @wiliamfeng
thg 4 24, 2019 2:47 SA

@dao.thai.son m đang làm thế này nha, bạn xem góp ý cho mình nhé:

  • Mình tạo 2 component là : ProductDetail & ProductRelated.
  • Trong trang chi tiết SP - component ProductDetailPage mình import 2 thằng trên vô và call API trong đó. Sau đó mình pass data qua cho 2 thằng con kia
thg 4 24, 2019 3:02 SA

@wiliamfeng sao bạn lại call 2 api bên component cha rồi pass sang con?? bạn phải pass slug từ productDetail qua 2 component kia và call api bên component con chứ?

Avatar Hoang vn @wiliamfeng
thg 4 24, 2019 3:08 SA

@longnk1301 à, tại vì mình thấy gọi API ở một chỗ sẽ dể quản lý hơn so vs việc gọi ở 2 nơi kia . ý bạn là mình đang làm ngược ? Cách của m ko tốt ở điểm nào ?

thg 4 24, 2019 3:24 SA

@wiliamfeng :v mình thì thấy cách của bạn khó maintain hơn đấy, vì cùng 1 file nên code rất dài. Cách của bạn theo mình thấy thì khi load trang sẽ chậm hơn bởi vì call 2 api cùng 1 lúc có khi dẫn tới bất đồng bộ, nếu làm theo cách của mình ví dụ product của bạn không có các sản phẩm liên quan thì sẽ không cần phải call api ở bên ProductRelated

Avatar Hoang vn @wiliamfeng
thg 4 24, 2019 3:33 SA

@longnk1301 Để m test thử đã nhé. Cso gì m sẽ hỏi lại bạn sau. Tks bạn

Avatar Hoang vn @wiliamfeng
thg 4 25, 2019 1:28 SA

@longnk1301 Hiện tại mình đã giải quyết được xong vấn đề chỉ bằng cách gọi thêm apis trong hàm componentDidupdate (như cách bạn @HuyDQ bày bày cho m bên dưới ) chứ chưa tách api ra 2 component con như bạn nói.

Bạn cho mình hỏi thêm về cách của bạn, theo đó cách của bạn thì vấn đề của mình sẽ được giải quyết như thế nào ạ

1 CÂU TRẢ LỜI


Đã trả lời thg 4 24, 2019 2:40 SA
Đã được chấp nhận
+1

bạn nên chia thành 2 component ra chứ không nên gộp chung, 1 component là ProductDetailcomponentRelatedProduct`. Như thế bạn có thể gọi độc lập 2 phần API tùy theo url

Chia sẻ
Avatar Hoang vn @wiliamfeng
thg 4 24, 2019 2:43 SA

chia ra cũng được nhưng nó có liên quan gì đến câu hỏi của mình đâu nhỉ. Bạn làm ơn giải thích thêm cho m đc không. Tks bạn

Avatar Hoang vn @wiliamfeng
thg 4 24, 2019 2:47 SA

@HuyDQ m đang làm thế này nha, bạn xem góp ý cho mình nhé:

  • Mình tạo 2 component là : ProductDetail & ProductRelated.
  • Trong trang chi tiết SP - component ProductDetailPage mình import 2 thằng trên vô và call API trong đó. Sau đó mình pass data qua cho 2 thằng con kia
thg 4 24, 2019 3:37 SA

@wiliamfeng ở đây bạn có thể dùng thêm hàm componentDidUpdate để gọi API mới nhé. Giả sử url của bạn là /product/p-a thì bạn gọi API load sản phẩm p-a trong componentDidMount. Sau đó khi bạn click vào link sản phẩm liên quan thì dùng hàm componentDidUpdate để gọi API mới

Avatar Hoang vn @wiliamfeng
thg 4 24, 2019 3:53 SA

@HuyDQ tks bạn, m sẽ test thử.

Avatar Hoo @Donhv
thg 5 19, 2019 2:58 CH

Có 2 điểm:

  • Bạn nên chia nhỏ component
  • Nơi để gọi api của React là componentDidMountcomponentDidUpdate. tuy nhiên khi sử dụng componentDidUpdate cần check điều kiện khi setState tránh vòng lặp vô hạn
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí