TypeError: Cannot read property 'version' of undefined

TypeError: Cannot read property 'version' of undefined

我想在 ReactJS 中进行自动完成输入。在我使用 ReactJS 之前,我通常使用 jQuery 来自动完成。正因为我一直在与 ReactJS 的许多自动完成作斗争并在我的网站上犯了错误,我决定 return 到 jQuery 的事情。

我通常会像常见的那样编写代码 jQuery 但是这次我只是遇到了异常错误:

TypeError: Cannot read property 'version' of undefined at $.widget (home.js:5734)
    at CarouselPage._callee$ (home.js:49729)
    at tryCatch (home.js:46411)
    at Generator.invoke [as _invoke] (home.js:46637)
    at Generator.prototype.(/anonymous function) [as next] (http://localhost.mysite.com/js/home.js:46463:21)
    at asyncGeneratorStep (home.js:49673)
    at _next (home.js:49675)
    at home.js:49675
    at new Promise (<anonymous>)
    at CarouselPage.<anonymous> (home.js:49675)

这是我写的代码:

import React, {Component} from 'react';
import $ from 'jquery-ui';
/* ... some codes ... */
async componentWillMount() {
    $('#location').autocomplete({
      source: '/thislocation/all/name'
    });
}
/* ... more codes ... */
render() {
    let {state} = this;
    return (
  <div className="carousel-home">
       <input type="text" placeholder="Lokasi" name="location" id="location"
          autoComplete="off"/>
  </div>

in /thislocation/all/name URI 使用 getName() 函数转到我的控制器,我刚刚创建了一个硬编码数组以确保此代码有效:

public function getName(){
    try{
      return response()->json(['test','123','234']);
    } catch (Exception $exception){
      return response()->json(['error' => $exception->getMessage()], 404);
    }
} 

我在这段代码中遗漏了什么?

您不能将 React 与 JQuery 混合使用。 React 保留它自己的 DOM 副本并处理它的虚拟 DOM 所有更改,然后决定何时写入真实 DOM。 JQuery 直接对 DOM 使用命令式更改,因为 React 不从 DOM 读取,只写入它,它不会知道 jQuery 所做的任何更改.它们是截然相反的,你不应该混淆它们。

你可以使用 refs 与 jQuery 集成在 React 中!

我上周刚在工作中做了这个,我需要将 jQuery 'hidden.bs.modal' 事件侦听器附加到模态 window,在 componentDidMount.

内定义

试试这个:
(参见 componentWillMount<input ref=...

import React, {Component} from 'react';
import $ from 'jquery-ui';

  class ....
  /* ... some codes ... */

  async componentWillMount() {
    this.$el = $(this.el);
    this.$el.autocomplete({
      source: '/thislocation/all/name'
    });

    $('#location').autocomplete({
      source: '/thislocation/all/name'
    });
  }

  /* ... more codes ... */ 

  render() {
    let {state} = this;
    return (
      <div className="carousel-home">
        <input ref={el => this.el = el} type="text" placeholder="Lokasi" name="location" id="location"
            autoComplete="off"/>
      </div>
    )
  }```