0
[ReactJS] Call API trong ComponentDidMount()
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 ạ ?
1 CÂU TRẢ LỜI
+1
bạn nên chia thành 2 component ra chứ không nên gộp chung, 1 component là ProductDetail và componentRelatedProduct`. Như thế bạn có thể gọi độc lập 2 phần API tùy theo url
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
@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
ProductDetailPagemình import 2 thằng trên vô và call API trong đó. Sau đó mình pass data qua cho 2 thằng con kia
@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
Có 2 điểm:
- Bạn nên chia nhỏ component
- Nơi để gọi api của React là
componentDidMountvàcomponentDidUpdate. tuy nhiên khi sử dụngcomponentDidUpdatecần check điều kiện khisetStatetránh vòng lặp vô hạn
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
@dao.thai.son m đang làm thế này nha, bạn xem góp ý cho mình nhé:
ProductDetail&ProductRelated.ProductDetailPagemình import 2 thằng trên vô và call API trong đó. Sau đó mình pass data qua cho 2 thằng con kia@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ứ?
@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 ?
@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
@longnk1301 Để m test thử đã nhé. Cso gì m sẽ hỏi lại bạn sau. Tks bạn
@longnk1301 Hiện tại mình đã giải quyết được xong vấn đề chỉ bằng cách gọi thêm
apistrong hàmcomponentDidupdate(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 ạ