Сбой отладки npm в ReactJS

Question

Используя npm debounce, я получаю сообщение об ошибке со следующим кодом в ReactJS. Ошибка

Javascript - Uncaught TypeError: Object(...) не является функцией

происходит, когда функция передается в debounce()

import React, { Component } from 'react';
import { debounce } from 'debounce';

class test extends Component {
     constructor(props) {
         super(props);
         this.state = {
             yolo: {}
         };
     }

     foobar(param) {
         debounce(() => {
             this.setState({yolo: param});
         }, 99);
     }

     render () {
         return (
             ...
             <SomeComponent action={this.foobar.bind(this)} />
             ...
         );
     }
}

Я пробовал некоторые решения, упомянутые в разделе "Отладка Perform" в React.js, но, похоже, ни одно из них не работает.

Answer 1

import React, { Component } from 'react';
import debounce from 'debounce';

class test extends Component {
     constructor(props) {
         super(props);
         this.state = {
             yolo: {}
         };
         this.foobar.bind(this);
     }

     foobar(param) {
         debounce(() => {
             this.setState({yolo: param});
         }, 99);
     }

     render () {
         return (
             ...
             <SomeComponent action={this.foobar.bind(this)} />
             ...
         );
     }
}

Верхний набор кода должен работать. Итак, причина, по которой ваш вызов в foobar раньше не работал, была в том, что вы пропустили эту строку: this.foobar.bind(this);, Ваш предыдущий синтаксис работал просто отлично и на самом деле предпочтительнее this.foobar =. Причина в том, что один - это синтаксис ES6, а другой - ES5. Когда эта функция выполняет функцию связывания, она прикрепляет this контекст, когда функция вызывается. Вот ссылка на статью, которая объясняет это: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Теперь второй частью этого был импорт. когда вы используете синтаксис скобки объекта, это фактически называется деструктуризацией объекта. Таким образом, все, что этот объект экспортирует, пытается получить свойство debounce и сделать его доступным в текущем файле. Проблема в том, что я подозреваю, что этот пакет npm уже экспортирует функцию по умолчанию, поэтому вам не нужно что-то к ней получать. Есть смысл?

Надеюсь, что все это помогает! Желаем удачи (thumbsup)