#41 CRUD React 5 - Thêm Mới Người Dùng (CREATE) | 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 #41 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

[@phamhieu9539]

Cam on ban . minh moi học React được hơn năm rồi , mình nghe bạn nói rất hay , cam ơn rất nhiều , chúc bạn có sức khỏe tốt để update thêm video nhé , cam ơn nhiêù lám

[@hoidanit]

you're welcome :v

[@hoathanh6302]

Đã học qua javascript + reactjs function component với hooks, em theo khóa này của anh anh nói đến đâu em thấm đến đó :))) đó giờ chưa có cảm giác này, cám ơn anh.

[@hoidanit]

thì cứ tiếp tục thôi em.haha

[@khaitrinhviet]

Thực sự anh vừa dạy và code rất dễ hiểu. Cảm ơn anh rất nhiều!

[@hoidanit]

cảm ơn bạn đã ủng hộ :v

[@eddy7750]

10:00 sự luyên thuyên quý giá của anh đã giúp em có động lực để reject 1 cái offer làm marketing cho ng quen lương up to 10m để lựa chọn đi intern fullstack với lương chỉ 2m, dù bèo bọt nhưng em nghĩ mình thực sự đam mê lập trình ^^. Cảm ơn anh rất nhiều !!!

[@hoidanit]

nhìn đưongf dài đi bạn. nếu theo đuổi, nên theo đuổi đến cùng. ít nhất sau này nhìn lại ko hối hận.kk

[@koutarou4410]

Cảm ơn anh nhiều nha , series rát dễ hiểu

[@hoidanit]

you're welcome :v

[@anhkiethanguyen8110]

giải thích cho anh em 30:00 - không nên mutate 1 state dựa trên ref cũ vì React sử dụng shallow cmp (anh em tự search gg nhé) nên nó sẽ k render lại component - tốt nhất nên clone state cũ và setState dựa trên state đã clone

[@hoidanit]

học hết khoá rồi tính e ơi =))

[@NguyễnNgọcThìn-s4m]

a này ảnh hài :D , coi video tuy dài nhưng vừa học vừa vui

[@hoidanit]

ahihi :v

[@jonnyevans1115]

có vẻ ngoài dạy học thì anh còn là nhà đầu tư...

[@hoidanit]

lĩnh vực a làm là chứng khoán và ngân hàng mà e :v

[@phuongnam249]

quá là bổ ích :(( huhu thích quá anh ơi

[@NguyenNguyen-hm5ve]

Lúc anh nói super good :v, giọng anh hài quá :)))))

[@hoidanit]

muốn đọc chuẩn native speaker phát cơ mà quay video hết sức rồi e. phát âm ko nổi :v

[@nvcIT]

hay

[@hoidanit]

cảm ơn bạn đã ủng hộ :v

[@TanTai_a_pPhan]

checkValidate = () => { const arr = ["email", "password", "address", "lastName", "firstName"]; const checkData = arr.every((i) => this.state[i]); return checkData; }; phút 50 các bạn kham khảo code này ngắn gọn hơn nha, đoạn này nó sẽ kiểm tra các giá trị trong mảng arr có tồn tại trong this.state (là các giá trị state bạn đã khai báo trên đầu hàm ) hay không nếu mà có thì nó sẽ trả ra true còn không có thì sẽ là false

[@hoidanit]

cảm ơn bạn đã góp ý

[@thanhvochi7659]

1:09:25 cũng đến ạ cho anh luôn á

[@hoidanit]

ahihi :v

[@hongsonnguyen9620]

37:00 tạt nước lạnh vào mặt

[@hoidanit]

:v

[@tranhoangnam6371]

tks anh. E công nhận cái console.log hay thật, e bị lỗi 1 cái ký tự chữ erroCode với errCode không để ý ngồi xem mãi đến lúc mình console.log ra mới hiểu chuyện gì xảy ra.

[@hoidanit]

đơn giản nhưng hiệu quả.hehe

[@theanhnguyen17801]

anh ơi chỗ 1:00:40 khi em k ghi đầy đủ thông tin nó hiện ra alert xong ấn OK thì nó unmount cái component ModalUser đi làm thế nào để ấn ra ngoài nó k unmount đi vậy ạ

[@hoidanit]

dùng class của bootstrap đấy em. stackoverflow.com/questions/16152073/prevent-bootstrap-modal-from-disappearing-when-clicking-outside-or-pressing-esca em cần đọc docs của thằng bootstrap xem nó truyền props như thế nào. ở đây là data-backdrop="static"

[@atNguyen-sy3il]

1:16:38 Vậy là resolve, reject của promise nó cũng không hẳn giống return phải không anh, resolve, reject xong vẫn chạy xuống lệnh phía dưới đc

[@hoidanit]

code thôi em. dần ngộ ra hết thôi mà :v

[@atNguyen-sy3il]

@@hoidanit 1:01:27 ở component con mình có func handleAddNewUser(), trong hàm này thì lại gọi func createNewUser của thằng cha, rồi truyền state từ con sang cha. Sao mình không code gộp 2 func này lại ở bên component con luôn cho rối vậy anh.

[@hoidanit]

@@atNguyen-sy3il học đi em. con gọi cha là lift-up state e nhé. nếu mình xử lý đc trong thằng con thì ko cần gọi lên cha nữa

[@tvtchanel9845]

Đợi cái tu to ri ồ dạy tiếng anh của anh

[@hoidanit]

lâu lắm e ơi. tiếng anh là 1 hành trình.haha

[@minhnghia107]

Anh nghĩ sao về việc HIỆU NĂNG khi người dùng nhập input xong -> blur ra ngoài -> gán giá trị cho State. Thay vì gán liên tục vào state như trong video a

[@hoidanit]

bạn cứ học hết khoá đi rồi hãy tính chuyện performance :v

[@TriNguyen-jl9jk]

Ở đoạn 1:17:26 thay vì else, em return trong điều kiện if(check === true) có okay kh anh

[@hoidanit]

bạn test thử thôi. nếu kết quả đúng thì ok :v

[@hongsonnguyen9620]

28:50 anh hông sợ chó cắn hả anh :(( khóa reactjs bị săn 1 lần rồi kkk

[@hoidanit]

nhà hàng xóm :v

[@danielbui12]

Xử lý onChange có cách lẹ hơn ạ. Cho mỗi cái input cái name giống với state thế là event.target có hết luôn. Với cả sao anh không dùng destructering để code ngắn hơn :v

[@hoidanit]

có hết e nhé. cứ bình tĩnh. mới #41 mà :v

[@lethitruc6794]

nếu bạn 'mò' đủ lâu sẽ thấy rằng: ko cần khai báo sẵn các key-value trong 1 state vì các key-value của state có thể được generated khi ta xử lý đúng logic :)

[@learnenglishbysinging3293]

mình dùng thuộc tính required html thay cho Hàm checkInput đc không a😁😁

[@hoidanit]

ko đc e. vì html e có thể inspect và xoá cái required ấy đi đc

[@angVanHuy-tf2rv]

duyệt object dùng vòng for in ngon hơn đó a

[@hoidanit]

à uh. cách nào cũng được e nhé :v

[@huysoccer7674]

anh tạo thêm scroll dữ liệu ạ, dữ liệu em tạo nhiều nhưng không thể kéo xuống xem các dữ liệu khác

[@hoidanit]

tự thêm đi em. còn ở series này, anh cũng có làm cái scroll em nhé :v

[@7c-ngoctrungtrinh210]

Anh ơi cho e hỏi vs ạ! Ví dụ 1 ng đăng kí tài khoản (chứ ko phải do admin tạo) thì làm sao trong database lưu tài khoản đó với role là admin hay user để phân quyền ạ? e thấy nhiều kênh lấy ví dụ thì họ đều có sẵn data user set sẵn role rồi ạ!

[@hoidanit]

e cứ học đi. yên tâm là học hết khoá, em auto làm đc điều e hỏi nhé :v

[@7c-ngoctrungtrinh210]

@@hoidanit dạ e cảm ơn a nhiều ạ!

[@Datrikcntt]

1:09:25 chơi cái gì cơ anh :))

[@ittime4472]

Anh ơi em hỏi tí : khi mà e connect với thằng nodejs , Ấn Add new thì bên nodejs nó bào là Error: WHERE parameter "email" has invalid "undefined" values

[@hoidanit]

console.log xem là e đã lấy đc giá trị email chưa

[@hoangduongtien7879]

may có đoạn cuối show code thay đổi của anh mà em biết mình thiếu từ await ở phần biến response, ko có từ đó em console.log(response) nó cứ trả ra 1 promise nên response.errCode toàn ra undifine hic

[@hoidanit]

ahihi :v

[@QuyNguyen-jz1xq]

Anh cho em hỏi là sao cái modal của em nó không có hiệu ứng khi hiện ra cũng như ẩn đi.

[@theanhnguyen17801]

anh ơi mình chỉ dùng state để giử dữ liệu đi thôi ạ. Tại sao lại k dùng form ạ anh có thể giải thích 1 chút cho e hiểu k ạ

[@hoidanit]

a chưa hiểu ý em. em nói cụ thể hơn đc ko. hoặc em đăng câu hỏi lên group hỏi dân it nhé

[@theanhnguyen17801]

@@hoidanit ý e là sao k dùng form để giử dữ liệu ấy ạ

[@hoidanit]

@@theanhnguyen17801 dữ liệu trên form, đôi khi em muốn chế biến lại rồi mới truyền vào apis, thì phải hold trong state chứ. cần thì lôi ra. chứ lưu ở form HTML làm gì em =))

[@minhthanhnguyen2246]

Anh ơi, em gặp một vấn đề là input của em là một mảng gồm nhiều object trong đó, thì em nên tạo thêm một cái popup nữa để handle hay là có một giải pháp khác k anh? Em cám ơn anh!

[@hoidanit]

a chưa hiểu ý em. e minh họa data của e cho a xem nào

[@minhthanhnguyen2246]

@@hoidanit dạ là vầy anh: name: 'kaco' version: '1.0' paras:[ {'name': 'ampere1' 'unit':'A' 'size': 15}, {'name': 'ampere2' 'unit':'A' 'size': 16}, {'name': 'Vol' 'unit':'V' 'size': 15}, .... ] cái paras nó sẽ có rất nhiều object bên trong như vậy anh. Idea của em là em sẽ tạo ra một cái modal như anh khi mình click vào edit paras thể thêm các object, dưới dạng là một cái table gồm các là các thuộc tính như: name, unit, size. Một lần mình có thể thêm được nhiều object nên em tạo thêm một nút nhấn add bên trong cái modal để khi người dùng click vào thì nó sẽ hiển thị thêm một cái row (gồm các input để người dùng điền thông tin vào đó), đến đây thì em k xử lý được cái nút add ấy nữa :(((

[@minhthanhnguyen2246]

@@hoidanit dạ nếu anh vẫn thấy em trình bày khó hiểu thì em sẽ inb qua facebook cho anh :((( em cám ơn anh

[@hoidanit]

à ko. a nhìn qua là a hiểu rồi. cái e muốn làm thì cần nắm vững kiến thức về react thì mới làm đc. hiện tại a đang làm tutorial basic nên chưa cover đc vấn đề e nói nhé. cơ mà ý tưởng là sẽ như thế này: A hiểu như thế này có đúng là điều e muốn ko nhé: cái modal nó sẽ có 1 nút thêm mới nữa, khi nhấn vào nút thêm mới thì nó sẽ sinh thêm 1 row gồm các thông tin (name, unit, size), clone y đúc như cái ban đầu (row mặc định). Muốn làm đc như vậy thì e sẽ cần biết rằng. mỗi một lần nhấn vào nút thêm mới => sinh 1 row mới thì đồng nghĩa với việc phải bắt thằng React nó render lại (re-render) => mình cần đặt một biến State để quản lý đống dữ liệu trên cái modal của e. A gợi ý cách làm nhé: trong hàm init state ấy, e tạo 1 object, ví dụ a đặt là : listAmpe: { ampe1: { name: '', size: '',...} và 1 cái biến để lưu indexAmple (số phần tử đã thêm vào listAmpe) mỗi lần e nhấn nút thêm mới, thì sẽ cần tăng cái biến indexAmple lên (i++), sau đấy là cập nhật biến listAmpe nhé (dựa vào index đấy e, cái listAmpe nó sẽ là list động)

[@minhthanhnguyen2246]

@@hoidanit dạ em cám ơn anh em sẽ tiếp tục nghiên cứu thêm, em cũng mới tìm hiểu đến reactjs nói riêng và IT nói chung được gần 1 tháng thôi nên nhiều cái em bị bí k biết làm sao :((( tất cả đều mới với em :(((

[@nguyenquocan8949]

chỗ validate có cần .trim() để xoá khoảng cách ko ạ lỡ user nó chơi toàn dấu cách thì có bị lỗi ko ạ

[@hoidanit]

cái này ko cần thiết e. sau này tùy vào rule đặt mật khẩu của e nhé. trong thực tế, ví dụ e yêu cầu mk có độ dài ít nhất 6 ký tự, 1 chữ hoa, 1 chữ thường và 1 ký tự đặc biệt => ko bao h vào case gồm toàn dấu cách cả

[@buiquangminh6697]

lúc create false thì của em hiện mỗi errCode =1 còn errMessage lại k hiện, em vào postman check thì vẫn có. Không biết tại sao anh nhỉ, à mà lúc em tạo user ở phía server thì vẫn tạo dc trùng email, không nhập gì vẫn tạo dc user p/s: em sửa lại thành response.message.errMessage thì dc rồi , còn cái user bên server anh xem thử xem có đúng k hay là em code sai ạ

[@hoidanit]

em cứ sửa theo cách e hiểu nhé. ở đây a chỉ hướng dẫn thôi. bọn e thấy cái gì hợp lý thì cứ triển khai.haha

[@nguyenquocan8949]

lỡ tay xoá code giờ học lại từ đầu :))

[@MinhHảiPhòng-d7g]

nice:D

[@angVanHuy-tf2rv]

sao phần setState ko để là [id] = value cho nhanh luôn a

[@hoidanit]

tùy mỗi người, mỗi cách làm e nhé. cách làm nào e thấy dễ hiểu thì quất cách đấy :v

[@thanhtungnguyen1626]

a ơi cho em hỏi làm sao cột id trong database tự động gán lại giá trị của các bản ghi mình đã xóa ạ. db của e đang có id là 1 đến 10 rồi e xóa 5 cái cuối đi và tạo mới thì nó sẽ gán luôn là 11 chứ ko phải 6 ạ

[@hoidanit]

cái đấy là do mình dùng auto increase trong db. ko cần quan tâm cái đấy đâu em. cứ học tiếp đi

[@thanhtungnguyen1626]

@@hoidanit vâng ạ e cảm ơn anh ạ

[@nguyenlecao9860]

Thay vì gọi lại API sau khi thêm user thành công thì em làm như này được ko a let { arrUsers } = this.state; this.setState({ arrUsers: [...arrUsers, childState], }); this.closeModal(); Với em muốn dùng scrollIntoView() để cho cái table lướt xuống cái element mới tạo sau khi tạo mới user thành công á a, cái table nó lướt xuống được rùi mà k hiểu sao sau đó nó tự lướt lên lại ạ, em thử cho cái hàm scrollIntoView vào trong tham số của setState để nó chạy sau nhưng vẫn không được anh ạ. Anh có giải pháp nào không ạ

[@hoidanit]

em có code minh họa sandbox thì anh mới test được. chứ ngồi đoán lỗi thì ko fix đc đâu.haha

[@nguyenlecao9860]

Em gửi anh video nha

[@vanphivo4614]

sao em làm đến đoạn submit để tạo 1 user mới thì nó vẫn nhận được dữ liệu user vào database nhưng không hiển thị ra màn hình ngay mà phải reload lại trang mới được vậy a? thêm nữa là em add xong thì modal cũng k tắt đi nữa @@

[@hoidanit]

check code đi e =))

[@sevente_en]

anh ơi sao để em đẩy code của e làm theo anh lên git nhỉ, em làm bị lỗi, search thì ngta kêu là do trước đó clone của anh về nên phải sửa cái gì đó, mà em làm chưa được @@

[@hoidanit]

học git trước đi em. với lại, lỗi là lỗi gì. tập đọc lôi đi. ko fix.đc thì học cái series git của a cho nó bài bản

[@sevente_en]

@@hoidanit dạ a

[@sevente_en]

@@hoidanit lỗi của em là : error: 'HealthCare/' does not have a commit checked out fatal: adding files failed

[@_aoManhHung]

em có tìm hiểu thì em thay let arrInput = ["email", "password", "firstName", "lastName", "address"]; thành let arrInput = Object.keys(this.state); thì sẽ ngắn gọn mà vẫn đảm bảo Key

[@hoidanit]

uh. sao cũng đc em nhé :v

[@Spkntei]

Good code : handelOnchangeInput = type => e => { this.setState(prev => { return { [type]: e.target.value, }; }); };

[@hoidanit]

ahihi :v

[@CuongNguyen-qt9to]

ngay 18/8/2024

[@johnblack2401]

anh ơi, anh giúp e fix lỗi data tên là net::ERR_CONNECTION_REFUSED , nó chết ngang khi e đang làm lun a ơi. Em có gửi source code cho a r, e mò mấy tiếng đồng hồ r a ạ :(((

[@hoidanit]

check xem backend đã chạy chưa đã e =))

[@manhlinh3138]

Lỗi có mấy dòng code cỏn con bên api mà ngồi 3 4 tiếng đồng hồ @@ mô phật

[@hoidanit]

đây là điều bình thường mà e. thời gian a làm 1 video cho bọn e xem nó còn nhiều gấp mấy lần thời lượng video :v

[@danhpham7]

Anh ơi, cho em hỏi nếu em dùng dynamic key như v có Bad code không? handleOnChangeInput = (e, nameInput) => { this.setState( { [nameInput]: e.target.value, } ); };

[@hoidanit]

ko e nhé