时间戳

首页 > 解决方案 > TypeError：无法读取未定义的属性“版本”

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)

这是我写的代码：

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

我在这段代码中错过了什么？

标签： jqueryreactjsjquery-ui

解决方案

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

推荐阅读