Yêu cầu thg 7 5, 2019 2:08 SA 288 0 1
  • 288 0 1
+1

Nhờ xem giúp lỗi trong đoạn logic code

Chia sẻ
  • 288 0 1

Chào các bạn, xin lỗi vì lại làm phiền mọi người thêm lần nữa, nhưng vì thời gian đang khá gấp và mình mất gần một ngày mà vẫn chưa giải quyết được vấn đề nên m thực sự cần mn trợ giúp ạ. Trước đó các câu hỏi này của mình :

https://viblo.asia/q/ant-design-edit-cell-trong-table-3m5W0vvyKO7

https://viblo.asia/q/chuyen-doi-thoi-gian-sang-giay-yDZO711xZwj

Thực ra cùng là một vấn đề với câu này, và m cũng định hỏi câu này nối tiếp ở các Topic đó nhưng lại sợ không lên top được (vì m thực sự đang bị deadline nên rất cần gấp) nên mình đành tạo ra chủ đề mới ( mong Mod lượng thứ cho mình ).

M xin mô tả qua vấn đề của m để mn hiểu hơn, mình có 2 ô input bằng datePicker cho người dùng select chọn thời gian. Điều kiện valid cho 2 ô này là không được emptystart Time phải bé hơn end Time. Sau khi 2 ô này hợp lệ sẽ tự động tính ra kết quả của ô Trim Time.

Qua Docs của thằng Ant ở đây:

https://ant.design/components/table/#components-table-demo-edit-cell ( cái này để edit cell trong table).

và ở đây:

https://github.com/ant-design/ant-design/issues/5155 ( cái này để validator cho đk start Time < end Time)

Mình cũng tạo ra được một cái demo cũng gần được như mong đợi ở đây: https://codesandbox.io/s/jovial-pond-ncc8s

Tuy nhiên, nó đang bị một bug là giá trị của 2 ô datePicker đang bị trễ 1 lần so với lúc chọn. Ví dụ ban đầu bạn select nó chưa lấy ngay giá trị ấy, bạn phải select một lần nữa thì nó mới lấy giá trị bạn select lần đầu. Vì thế nên kq của mình đang bị sai .

Mình có log ra thử ( line 25 , file demo.js) thì phát hiện nó vào lỗi empty Mình thực sự chưa hiểu nguyên nhân vì đâu ? Nhờ mn xem qua giúp mình. Mình xin cám ơn !

Avatar Anh Tran @thanh_tuan
thg 7 5, 2019 3:17 SA

Các bạn ơi, xin giúp m với !

Avatar Anh Tran @thanh_tuan
thg 7 5, 2019 7:16 SA

😭😭😭😭😭 giúp m với ...

thg 7 5, 2019 7:25 SA

@thanh_tuan

Nếu không được thì chuyển hướng sang không dùng form nữa mà set value vào state và validate bằng tay thử xem bạn.

Avatar Anh Tran @thanh_tuan
thg 7 5, 2019 8:12 SA

@pht mình cũng đã tính như thế thế, việc validate bằng tay cũng không có khó khăn gì nhưng cái khó ở đây là sau khi validate và có lỗi thì bắn nó ra bằng cách nào ? Bình thường với Form, ở mỗi field m sẽ để sẵn một thẻ div trống bên dưới, để khi có lỗi thì thẻ div đó sẽ là nơi chứa message looix.

Tuy nhiên trường hợp này của mình là dùng Table của Antd việc render các cell là hoàn toàn tự động nên mình không thể can thiệp vào được mà bắt buộc phải dùng Form kết hợp vs Table để hiển thị lỗi bên dưới cell bạn à.

Thế mới rắc rối chứ 😥

thg 7 5, 2019 8:25 SA

@thanh_tuan

Bạn xem trả lời ở dưới nhé

Avatar Anh Tran @thanh_tuan
thg 7 5, 2019 9:31 SA

@pht Mình cám ơn bạn nhiều nha 👍

1 CÂU TRẢ LỜI


Đã trả lời thg 7 5, 2019 8:15 SA
Đã được chấp nhận
+2

Mình nghĩ là do phần validate của ant design là function async (nó dùng cái này https://github.com/yiminghe/async-validator) và phải validate success thì field mới có giá trị.

Còn function onChange => changeTime lại là synchronous function nên nó không đồng bộ với nhau.

Mình suy đoán như vậy chứ không chắc chắn.

Cách giải quyết là gọi setFieldsValue trong changeTime:

  changeTime = (dataIndex, time, timeString) => {
    const { record, handleSave } = this.props;
    const { getFieldValue, setFieldsValue } = this.form;

    setFieldsValue(
      {
        [dataIndex]: time
      },
      () => {
        this.form.validateFields([dataIndex], (error, values) => {
          if (error && error[dataIndex]) {
            console.log("error", error);
            return;
          }
          // ...
        });
      }
    );
  };
Chia sẻ
Avatar Anh Tran @thanh_tuan
thg 7 5, 2019 9:29 SA

tks bạn, mình làm theo cách bạn hướng dẫn thì kq OK rồi.

Tuy nhiên, đoạn async mình chưa thực sự hiểu, nếu như phán đoán của bạn thì trường hợp này của mình sao ko bị lỗi như thế : https://codesandbox.io/s/time-table-st3k5

( Vì trước đó, mình xử lý nhập Input bằng tay thì rất OK không có vấn đề gì cả. Sau đó , k/h thay đổi yêu cầu và dùng TimePicker mới sinh ra lỗi này )

thg 7 9, 2019 1:10 SA

@thanh_tuan

Nếu bạn sử dụng onChange cho input thay vì onPressEnteronBlur thì cũng bị issue tương tự đó.