Lifecycle component trong react
Mình đang làm Website rạp chiếu phim bằng Reactjs , và bị stuck ở phần lifecycle, mọi người cho mình hỏi ? :
-
Sau khi setState thì mình call Api ở lifecycle nào để lấy được props mới ,xong render ra ạ?? (ở code bên dưới mình để ngay trên setState, thấy chuối quá...)
-
Mình muốn lấy 1 obj đầu tiên trong một mảng được trả về từ Api, để render ra trước (làm dữ liệu mặc định), thì mình setState ở lifecycle nào ạ??
Mình xin cảm ơn...
//hàm setState của mình
ChangeCinema(cinema) { // thay đổi thông tin của Rạp sau khi user Click
this.props.layThongTinCumRapTheoHeThong(cinema.maHeThongRap);// call Api với para là mã hệ thống rạp
// ex : cinema.maHeThongRap = "CGV"
// data = [ {CGV-Quan1} , {CGV-Quan2}, {CGV-Quan3}]
this.setState({
cinema: {
maHeThongRap: cinema.maHeThongRap,
logo: cinema.logo,
}
})
}
1 CÂU TRẢ LỜI
Câu 1:
Bạn có thể dùng theo 2 cách như sau:
- Nếu bạn đang dùng class component thì gọi API ở
componentDidUpdate, hook này sẽ được gọi ngay sau khi bạnsetStatecho `cinema.maHeThongRap``. Demo:
componentDidUpdate(prevProps, prevState) {
if (prevState.maHeThongRap !== this.state.maHeThongRap) {
// gọi API ở đây
}
}
- Nếu bạn đang dùng functional component thì gọi API ở
useEffectvới dependency làcinema.maHeThongRap, hook này cũng sẽ được gọi ngay khicinema.maHeThongRapthay đổi . Demo:
useEffect(() {
// gọi API ở đây
}, [cinema.maHeThongRap])
Câu 2
-
Class component: Bạn có thể làm ở
UNSAFE_componentWillMount()để đảm bảo dữ liệu được render càng sớm càng tốt khi component đc mount, hoặc ko thì làm ởcomponentDidmountcũng được (hook này sẽ được gọi sau UNSAFE_componentWillMount 1 chút) -
Functional component: bạn gọi ở
useEffectvới dependency là mảng rỗng nhé. Demo:
useEffect(() {
// gọi API ở đây
},[]) // ko có dependency nên cả khối useEffect này chỉ đc chạy 1 lần, phù hợp cho việc khởi tạo dữ liệu (tương tự componentDidmount)