typeahead.bundle.js: 374 Uncaught TypeError: this._send не является функцией (в ReactJs) - PullRequest
Новая
       21

typeahead.bundle.js: 374 Uncaught TypeError: this._send не является функцией (в ReactJs)

0 голосов
/ 24 сентября 2019

Я пытаюсь сделать компонент для страны typeahead в ReactJS.Я использую удаленный источник Bloodhound,

, но когда я пытался, он продолжает выдавать ошибку:

typeahead.bundle.js: 374 Uncaught TypeError: this._send isне функция

она даже не вызывает 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)

1 Ответ

1 голос
/ 26 сентября 2019

Проблема решена!это «тонкая» версия проблемы jquery.3x.x. slim .min.переключиться на не тонкий, и он отлично работает.Спасибо, что поделились своей мыслью.

...