Asked Apr 16th, 2019 3:50 AM 1257 0 1
  • 1257 0 1
+1

Load lại trang không bị mất dữ liệu

Share
  • 1257 0 1

Chào mọi người ! Hiện tại mình đang bị bí chỗ này, mong mọi người giúp đỡ mình, mình xin trình bày ở dưới:

Mình đang làm một trang liên hệ, trang này sẽ có 3 steps 1, 2 và 3 :

step 1: Form chứa các trường và các ô input, checkbox vv.. để người dùng nhập vào. Và dữ liệu strong step1 sẽ được lưu vào store ( của Redux )

step 2 : Lấy dữ liệu trong Store mà người dùng vừa nhập tại step 1, và show ra để họ đối chiếu lại, nếu thấy chỗ nào nhập sai có thể back lại step1 và sửa lại.

step 3: bước này đơn giản chỉ là thông báo lại gửi thành công hay thất bại

Theo phân tích vậy thì mình chia làm 3 component là : Step1, Step2 và Step3. Trong trang liên hệ (contact.js) mình import 3 componjent trên, mình có thiết lập state ban đầu là :

state= {
    curStep: 1
 }

và dựa vào cái state trên để render() 3 component kia. Khi nhấn Next or Prev mình sẽ set lại state cho nó. Và hiện tại trang contact của mình đang chạy tốt. Tuy nhiên có một vấn đề là khi mình đang ở step 2, maf người dùng vô tình load lại trang thì trang contact của mình sẽ bị render() lại từ đầu và lại trở về step1 (vì ở trên mình set state mặc định là 1) hơn nữa dữ liệu người dùng đã nhập tại step1 lưu trong store cũng bị tiêu luôn : (

Hiện tại mình đang nghĩ đến giải pháp lấy curStep thông qua params từ trên đường dẫn router như thế sẽ đảm bảo không bị mất curStep khi load lại trang nhưng còn cái dữ liệu thì mình chưa nghĩ ra giải pháp nào để không bị mất ngoài cách lưu vào trong localStorage .

Vì vậy mình muốn tham khảo ý kiến mọi người về vấn đề này. Mong nhận được ý kiến đóng góp & giúp đỡ từ các bạn ! Tks you mọi người !

Avatar No Naem @Naem
Apr 16th, 2019 4:00 AM

Form này của bạn để làm gì nhỉ :-? Nếu là search box mình nghĩ có thể đẩy param lên url còn nếu là Form để create hay update thì mình cũng chưa nghĩ ra :-?

0
| Reply
Share
Avatar Hoang vn @wiliamfeng
Apr 16th, 2019 4:04 AM

@Naem Form của mình để nhập thông tin từ người dùng ấy bạn. Vi dụ:

Name:  ....................................................
Age: ........................................................
Emai: ......................................................
Phone: ....................................................
Address: ................................................
vv...
0
| Reply
Share
Avatar No Naem @Naem
Apr 16th, 2019 4:07 AM

@wiliamfeng Vậy chắc chỉ có lưu localStorage thôi :v

+2
| Reply
Share

1 ANSWERS


Answered Apr 16th, 2019 8:50 AM
+1

bạn có thể lưu dữ liệu sau mỡi lần chỉnh bấm next hoặc prev vào localStorage. Sau khi form đã hoàn thành ở step 3 thì xóa trong đó đi. Trong hàm componentDidMount() thì có thể check xem nếu localStorage có dữ liệu thì tiến hành khôi phục lại nó.

Share
May 20th, 2019 3:54 AM

Thường mình cũng làm như vậy, hình như đây là cách đơn giản nhất thì phải.

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.