Jquery TypeError:无法读取属性'；版本'；未定义的

我想在ReactJS中进行自动完成输入。在使用ReactJS之前，我通常使用jQuery进行自动完成。就因为我一直在努力解决ReactJS的许多自动完成问题，并且在我的网站上犯了错误，我决定回到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)

---

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

您不能将React与JQuery混合使用。React保留自己的DOM副本，并对其virtualDOM进行所有更改，然后决定何时写入真正的DOM。JQuery直接对DOM使用命令式更改，因为React不从DOM读取数据，只向DOM写入数据，所以它不会知道JQuery所做的任何更改。它们是极为对立的，您不应该将它们混为一谈。

您可以使用它在react中与jQuery集成

我上周刚在工作中做了这件事，我需要将一个jQuery

'hidden.bs.modal'

事件侦听器附加到一个模式窗口，该窗口在

组件didmount

中定义

试试这个：
（请参阅

组件将安装
和

)
}```
请在中共享包含版本的代码it@HemadriDasari你是说我的
package.json
？不是。包含字符串的完整home.js组件代码version@HemadriDasari
home.js
是我代码的编译版本。我使用的是Laravel和网页，你可以按照上面的说明来做。实际上，我仍然感到困惑，没有得到解决我问题的最终答案。但我现在选择这个答案。它们是不兼容的，因为它们的工作方式，就像你不会将角度组件和vue组件混合在一起一样，只是不是它
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>

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

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>
    )
  }```