Как исправить: метод Meteor сработал дважды с помощью onClick или onKeyPress с помощью React - PullRequest
Новая
       18

Как исправить: метод Meteor сработал дважды с помощью onClick или onKeyPress с помощью React

0 голосов
/ 20 мая 2018

Всегда проверено:

Здравствуйте,

Я обнаружил, что в моей базе данных Метеоритный метод выполнялся несколько раз при нажатии или нажатии клавиши.

Мне не удалось вызвать ошибку.

Вот мой код: 

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>

Как исправить эту ошибку?

Спасибо

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Я нашел ошибку,

Ошибка возникает из-за отключения сервера.

Когда ваш Сервер отключен, и пользователь нажимает кнопку, которая вызывает метод ... так.... ничего не происходит ... и пользователь продолжает нажимать на кнопку, а Meteor сохраняет в памяти все действия.

Затем, когда сервер возвращается и включается, все клиентские запросы отправляются на сервер.

Таким образом, метод вызывается несколько раз.

Надеюсь, мне стало ясно; -)

0 голосов
/ 21 мая 2018

вы должны иметь возможность использовать свойство класса в качестве локальной переменной класса.используйте это, чтобы проверить, обрабатывает ли текущий запрос или нет.если он обрабатывает, возвращает рано, поэтому метод не вызывается.если он не обрабатывается, переключите его как обработку и верните обратно, чтобы он не обрабатывался в обратном вызове метода, когда запрос к серверу завершен.это предотвратит повторение до тех пор, пока не будет выполнен обратный вызов (что указывает на успешный ответ метода сервера). 

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>
        );
    }
}
...