javascript - typeahead.bundle.js :374 Uncaught TypeError: this. _send 不是函数(在 ReactJs 中)

Question

我正在尝试在 ReactJS 中为国家 typeahead 制作一个组件。我使用 Bloodhound 的远程源，

但是当我尝试时，它一直给我一个错误:

typeahead.bundle.js:374 Uncaught TypeError: this._send is not a function

它甚至不会唤起我的远程服务器中的 url 请求

如果我将源更改为本地 Bloodhound 源，则效果很好。

这是代码:

class TypeaheadCountry extends React.Component {

  constructor(props){
    super(props);
    this.inputText = React.createRef();
    this.handleChange = this.handleChange.bind(this);
    this.handleSelected = this.handleSelected.bind(this);
  }
  componentDidMount(){  

    /* for local source, it works well
    var src = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace(['id','name']),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: [
        {name:'UNITED STATES',id:'US'},
        {name:'CANADA',id:'CA'},
        ]
    });
    */

    /* but for remote source, always give me this error：
        typeahead.bundle.js:374 Uncaught TypeError: this._send is not a function
          at Transport._get (typeahead.bundle.js:374)
          at later (typeahead.bundle.js:113)
    */
    var src = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.whitespace,
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: {
          url: '/country/typeahead?q=%QUERY',
          wildcard: '%QUERY'
      },
    });
    src.initialize();
    this.$el = $(this.inputText.current);

    this.$el.typeahead({
      hint: false,
      highlight: false,
      minLength: 1
    },{
      name: 'country-list',
      source: src,
      display: 'name',
      displayKey: 'id',
      templates: {
        empty: [
            '<div class="card card-body">',
            'no data match',
            '</div>'
        ].join('\n'),
        suggestion: function (data){return '<div class="list-group-item list-group-item-action"><dl>'+'<dt class="text-primary">'+data.id+'</dt><dd>'+data.name+'</dd></dl></div>'}
      }
    });

    var self = this;
    this.$el.on('typeahead:selected typeahead:autocompleted', function(e, data) {
      self.handleSelected(e,data);
    });
  }
  componentWillUnmount() {

    this.$el.off('typeahead:selected typeahead:autocompleted', this.handleSelected);
    this.$el.off('change', this.handleChange);
    this.$el.typeahead('destroy');
  }
  handleChange(e, data) {
    this.props.onChange(e, data);
  }
  handleSelected(e, data) {
    this.props.onSelected(e, data);
  }
  render() {
    return(
      <div>
        <input type="text" ref={this.inputText} name={this.props.name} value={this.props.value} onChange={this.handleChange} className="typeahead" />
      </div>
    );
  }
}

它不断抛出此错误消息:

typeahead.bundle.js:374 Uncaught TypeError: this._send is not a function
          at Transport._get (typeahead.bundle.js:374)
          at later (typeahead.bundle.js:113)

Answer 1

问题解决了!这是 jquery.3x.x.slim.min 问题的“slim”版本。切换到非纤薄，效果很好。感谢您分享您的想法。