typeahead.bundle.js:374 Uncaught TypeError: this._send 不是函数（在 ReactJs 中）答案

【问题标题】：typeahead.bundle.js:374 Uncaught TypeError: this._send is not a function (in ReactJs)typeahead.bundle.js:374 Uncaught TypeError: this._send 不是函数（在 ReactJs 中）
【发布时间】：2019-09-24 17:16:10
【问题描述】：

我正在尝试在 ReactJS 中为国家/地区 typeahead 创建一个组件。我使用Bloodhound的远程源，

但是当我尝试时，它总是给我一个错误：

typeahead.bundle.js:374 Uncaught TypeError: this._send 不是函数

它甚至不会在我的远程服务器中调用 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)

【问题讨论】：

就我而言 self 是一个保留关键字，只需按照 ES6 的方式进行即可。 this.$el.on('typeahead:selected typeahead:autocompleted', (e, data) => { this.handleSelected(e,data); });
嗨，乔治，谢谢。但是在我的情况下，那个 self 变量不会引起任何问题。我改了名字也没什么区别，因为这与远程寻血犬问题无关。有什么想法吗？

标签： javascript reactjs typeahead.js

【解决方案1】：

问题解决了！这是 jquery.3x.x.slim.min 问题的“苗条”版本。切换到非苗条，它工作正常。感谢您分享您的想法。

【讨论】：