TypeError：无法读取未定义的属性“版本”

Question

我想在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)

这是我编写的代码：

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>

在/thislocation/all/nameURI中带getName()函数的控制器中，我刚刚创建了一个硬编码数组来确保此代码有效：

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

我在此代码中错过了什么？

Answer 1

您不能将React与JQuery混合使用。React保留它自己的DOM副本，并在所有虚拟更改上使用它的virtualDOM，然后决定何时写入真实DOM。JQuery直接对DOM使用命令式更改，因为React不会从DOM中读取数据，而只是对其进行写入，因此它不会知道jQuery所做的任何更改。它们是相反的对立面，您不应该混用它们。