Asked Apr 24th, 2:38 AM 220 0 1
  • 220 0 1
0

[ReactJS] Call API trong ComponentDidMount()

Share
  • 220 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 ạ ?

Dao Thai Son @dao.thai.son
Apr 24th, 2:42 AM

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

0
| Reply
Share
Hoang vn @wiliamfeng
Apr 24th, 2:47 AM

@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
0
| Reply
Share
Apr 24th, 3:02 AM

@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ứ?

0
| Reply
Share
Hoang vn @wiliamfeng
Apr 24th, 3:08 AM

@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 ?

0
| Reply
Share
Apr 24th, 3:24 AM

@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

+1
| Reply
Share
Hoang vn @wiliamfeng
Apr 24th, 3:33 AM

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

+1
| Reply
Share
Hoang vn @wiliamfeng
Apr 25th, 1:28 AM

@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 ạ

0
| Reply
Share

1 ANSWERS


Answered Apr 24th, 2:40 AM
Accepted
+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

Share
Hoang vn @wiliamfeng
Apr 24th, 2:43 AM

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

0
| Reply
Share
Hoang vn @wiliamfeng
Apr 24th, 2:47 AM

@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
0
| Reply
Share
Apr 24th, 3:37 AM

@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

+1
| Reply
Share
Hoang vn @wiliamfeng
Apr 24th, 3:53 AM

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

0
| Reply
Share
Hoo @Donhv
May 19th, 2:58 PM

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
0
| Reply
Share