How fix : Meteor Method fired twice with onClick or onKeyPress with React

Question

Always checked :

Hello,

I have discovered in my database the Meteor Method have been executed several times from click or keypress.

I don't manage to trigger the bug.

Here my code :

class Answering extends Component {
...

validAnswer() {
  ...

  validAnswer.call({
    ...
  });
}
...
render() {
    return (
...
<div
  id="Answering-button-next"
  role="button"
  onClick={() => { this.validAnswer(); }}
  onKeyPress={(e) => { if (e.key === 'Enter') this.validAnswer(); }}
  tabIndex="0"
>OK
</div>

How can fix this bug ?

Thank you

Does it only happen occasionally? If so, it may very well be a re-run after a reconnect or retry after failure. — MasterAM, May 20 '18 at 14:57
@MasterAM : Following the database, yes, it's very very rare. — DonFabiolas, May 20 '18 at 16:24
What about the logs? Any reports on errors or method reruns on server restarts? — MasterAM, May 20 '18 at 19:16

score 1 · Answer 1 · answered May 21 '18 at 02:59

you should be able to use a class property as a local class variable. use that to check if the current request is processing or not. if it's processing, early return so the method isn't called. if it isn't processing, toggle it as processing, and set it back to not processing in the method callback when the server request is complete. this will prevent a duplicate from happening until the callback has ran (indicating a successful server method response).

class Answering extends Component {
    isProcessing: false,

    validAnswer() {
        if (this.isProcessing) return;
        this.isProcessing = true;
        validAnswer.call({}, () => {
            this.isProcessing = false;
        });
    }

    render() {
        return (
            <div
                id="Answering-button-next"
                role="button"
                onClick={() => { this.validAnswer(); }}
                onKeyPress={(e) => {
                    if (e.key === 'Enter') this.validAnswer();
                }}
                tabIndex="0"
            >
                OK
            </div>
        );
    }
}

Thanks but with your solution, I need to do this in all my programs ? Any idea about origin of my bug ? — DonFabiolas, May 21 '18 at 09:25
Yes. Your bug is that the user is able to process the method twice, this prevents it. You can create a higher order component which contains this logic, then use this component anywhere you need to call a method. — Mark Shust at M.academy, May 22 '18 at 11:56

score 0 · Accepted Answer · answered May 23 '18 at 07:52

0

I found the bug,

The bug comes from the disconnection of server.

When you Server is disconnected and the user clicks on a button that calls a method ... so ... nothing happens ... and user continue to click on the button and Meteor keeps in Memory all actions.

Then, when the Server comes back and turns on, so , all client requests are sent to server.

Thus, the method is called several times.

Hope, I was clear ;-)

answered May 23 '18 at 07:52

DonFabiolas

439
1
7
17

1

I'm thinking you should still accept my answer as the valid answer, because long-running tasks on the server act just like a disconnection. you need client-side validation to check if the server method call has completed, otherwise you will also get the duplicated call. also, double clicking on your button will also cause the method to be called twice -- my suggested client-side validation checking fixes that. – Mark Shust at M.academy Jun 04 '18 at 16:33

How fix : Meteor Method fired twice with onClick or onKeyPress with React

2 Answers2