javascript - typeahead.bundle.js:374 Uncaught TypeError: this.

问题描述

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

但是当我尝试时，它一直给我一个错误：</p>

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)

标签： javascriptreactjstypeahead.js

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

问题描述

解决方案

推荐阅读