#43 CRUD React 7 - Cập Nhật Thông Tin User (UPDATE) | React.JS Cho Người Mới Bắt Đầu

[@hoidanit]

🌹Bạn nào muốn mua cho mình cốc cà phê, cái pizza hay chỉ là gói mì tôm hảo hảo, hãy dùng MoMo quét mã QR tại link này nhé: me.momo.vn/hoidanit (lưu ý: tên người nhận là PHAM VAN TUAN) Đây là video #43 trong series học và thực hành (miễn phí) để trở thành 1 fullstack web developer. 👉Xem Full Playlist này tại đây: kzbin.info/www/bejne/jKfZiZuEl6uKgbs 👉 Cần giải đáp thắc mắc, cũng như hỗ trợ, tham gia group Facebook : facebook.com/groups/hoidanit 👉 Fanpage Facebook Tiếng Việt: facebook.com/askITwithERIC 👉Các bạn đăng ký kênh, Like cũng như comment để mình có thêm động lực làm video nha. Cảm ơn mọi người ❤ 👉Chanel khác của mình (Tiếng anh): kzbin.info/door/HqJxLo7mKam9GKqqwr2wfA

[@hongsonnguyen9620]

2 tuần học xong 50video đầu rồi, cố lên ^^

[@AbvVl-o2j]

anh ơi ở đoạn thêm người mới và chỉnh sửa thiếu mịa số điện thoại rồi

[@bdssg-y2i]

xóa hay sửa thành công, các bạn nên alert cái message ra để dừng lại cái bảng thông báo message cho người dùng biết, cùng lúc đó câu giờ chờ cái await this.getAllUsersFromReact(); nó load lại data luôn 😁 Mấy cái message cũng đã có định nghĩa khi làm trong Nodejs rồi, cứ trơn tru mượt mà mà chạy như vậy thì thấy... hụt hẫng lắm 🤣 handleDeleteUser = async (user) => { try { let res = await deleteUserService(user.id); if (res && res.errCode === 0) { await this.getAllUsersFromReact(); alert(res.message); //câu giờ cho load data } else { alert(res.errMessage); } } catch (e) { console.log(e) } } doEditUser = async (user) => { try { let res = await editUserService(user); if (res && res.errCode !== 0) { alert(res.errMessage); } else { await this.getAllUsersFromReact(); alert(res.message); //câu giờ cho load data this.setState({ isOpenModalEditUser: false }) } } catch (e) { console.log(e); } }

[@hoidanit]

ko ai làm như bạn đâu bạn ơi (thực tế ấy). còn khoá này mình code lâu rồi, nhiều cái nó chưa chuẩn. cơ mà giải pháp của bạn nó chưa phải là cái tốt nhất đâu.hehe

[@HoangHuy-vq9iy]

đã dùng await rồi lại còn phải câu giờ ???????

[@AnhQuốc-j5w]

sau khi update xong dữ liệu thì ta sẽ gọi lại hàm getAllUser hay setState của UserManage thì ổn hơn shop nhỉ vì mình đang thấy khi set lại state thì code loằng ngoằng thêm 1 tý nhưng đổi lại không phải gọi lại API

[@hoidanit]

test thôi bạn. vì khóa này mình làm lâu lắm rồi, nên cũng ko nhớ chính xác nữa. bạn test, và ko thấy bug, như vậy là ok.kk

[@nghiabasil]

Khoá học quá hay anh ơi. Em có thêm vô gender, roleId vào trong form trông nó đẹp hẵn anh ạ

[@hdhjshsh19]

anh ơi cho em xin source code với

[@hoidanit]

khoá này code theo. ko có src bạn nhé

[@LamTran-dw4ry]

Em có câu hỏi: hàm doEditUser em có viết theo anh (tức là dạng arrow function: doEditUser = async (user) => {...}) thì chạy được nhưng khi em chuyển nó sang dạng function thường như sau thì bị lỗi: "TypeError: this.setState is not a function". async handleEditUser(user) { try { let res = await editUserService(user); if (res && res.errCode === 0) { this.setState({ isShowEditModal: false, }); await this.getAllUserFromReact(); } else { alert(res.errMessage); } } catch (e) { console.log(e); } } Code bên trong 2 function là y hệt nhau, chỉ khác là cách khai báo arrow function và function thường, có phải em sai cú pháp hay đây là 1 bugs của js? Mong nhận được câu trả lời từ anh vì em mất 3 tiếng đồng hồ chỉ vì lỗi này ạ :((

[@hoidanit]

bạn có thể google cái phạm vi sử dụng của biến this. ko phải ngẫu nhiên mình dùng arrow function đâu (đỡ phải suy nghĩ :v)

[@pikachu-dx9gc]

Anh hardcode password, khi mà edit thì password sẽ bị thay đổi theo chuỗi string mà anh hardcode đó rồi anh ạ. Vậy thì em muốn edit nhưng password vẫn giữ như cũ thì sao anh. Tại vì nếu ở componentDidmount em set password: user.password thì modal sẽ k lấy dc giá trị của password ra mà sẽ để trống anh ạ

[@BanDaoGaKon]

bài trước phần delete em thêm cái confirm mới biết react không cho, phải là window.cofirm thế là e tự làm thêm cái ModalDelete để cho lựa chọn có delete hay không để rèn tư duy mà cũng 3 4 tiếng mới làm được sang bài này e làm cái xong luôn

[@hoidanit]

haha

[@duyphungtran6280]

dạ cho em hỏi nhất vào nút edit sao lấy được thông tin người dùng ạ

[@hoidanit]

thông tin người dùng lưu khi fetch list user rồi, nên khi edit, react chỉ lấy ra thôi

[@minhhuylamquoc4046]

xem từ lúc 600 mấy sub giờ lên 730 :v

[@hoidanit]

cảm ơn em đã ủng hộ nha. hehe

[@learnenglishbysinging3293]

như mình làm chung form sửa và form tạo người dùng với tách riêng ra thì cái nào tốt hơn, dùng nhiều hơn a

[@hoidanit]

tùy góc nhìn mỗi người và cug tùy từng trường hợp. nếu data phức tạp, cug như khi sửa và tạo logic khác nhau nhiều thì nên tách riêng, còn ko thì code chung. nói chung cần phân tích ưu nhược điểm của cách làm trước khi quyết định e nhé

[@HoangHuy-vq9iy]

anh ơi cho em hỏi về thực tế ạ: cái đoạn phải copy Api từ nodejs sang React thì là phần việc của FE hay BE ạ ? hay cứ code viết ở React là của FE hết ạ ?

[@hoidanit]

copy thì có gì khó khăn hả bạn. api là do BE viết. react chỉ gọi api để lấy dữ liệu thôi. sau khi lấy dữ liệu, cần render ra giao diện. mà quan trọng gì nhỉ, vì trước sau gì bạn ko làm full hết

[@minhthanhnguyen2246]

anh ơi cho em hỏi là anh có làm video về việc khi mà mình điền email và password vào form login thì nó sẽ xử lý như thế nào để sau đó nó mới vào tới trang manage users không anh, tại em bắt đầu học từ video reactjs, mà em học đến bài này thì em cứ thắc mắc về vấn đề đó mãi :((( em cám ơn anh.

[@hoidanit]

cái này là redux làm e nhé. (e sẽ biết redux từ video #53). luồng nó là như này: 1. khi nhấn login => gọi api login. nếu succeed => gọi redux và lưu thông tin vào storage: userInfor và isLoggedIn = true 2. Tại file App.js, e để ý là nó đã mount route HOME ( = /), thì mở tiếp file Home.js. 3. ở file Home.js, mình có điều kiện check theo biến isLoggedIn đấy e. redux thay đổi biến này nên React sẽ tự động re-render => isLoggedIn = true nên đẩy e vào trang manage users đấy e

[@minhthanhnguyen2246]

@@hoidanit dạ em cám ơn anh, đến bài #53 chắc em phải xem thật kỹ!

[@minhthanhnguyen2246]

Dạ anh ơi cho em hỏi là với reactjs thì mình có thể làm được trang web với dữ liệu thay đổi liên tục và khi đó trang web sẽ hiển thị cập nhật dữ liệu liên tục như trang giao dịch chứng khoán của anh k ạ? Dạ em cám ơn anh!

[@hoidanit]

mình react thì ko e nhé. còn react + redux thì thừa sức . a sắp ra series về react, nó sẽ trả lời câu hỏi này của e nhé

[@minhthanhnguyen2246]

Dạ em cám ơn anh, tại e đang muốn nghiên cứu về phần đó để thực hiện đề tài, em cám ơn anh rất nhiều. Em sẽ tiếp tục theo dõi thường xuyên.

[@minhtaingo9182]

Con sql của anh có quan hệ ko a, e chưa thấy

[@hoidanit]

em muốn học nhanh thì tự đọc tài liệu trước, còn trong dự án của a là có nhé

[@minhtaingo9182]

@@hoidanit ở sau video này ạ anh, video trước e ko thấy