javascript - 在 ReactJS 中用 Jquery 替换 JSON 时未定义“$”

Question

我正在为使用 JQuery 从远程源加载 JSON 编码数据的 Web 应用程序学习 ReactJS。

在这个示例中，this.state 被手动设置为 JSON 编码的数据

import React, { Component } from 'react';
import Projects from './Components/Projects';
import './App.css';

class App extends Component {
  constructor(){
    super();
    this.state = {
      projects: [
        {
          title: 'Buisness Website',
          category: 'Web Design'
        },
        {
          title: 'Social App',
          category: 'Mobile Development'
        },
        {
          title: 'Ecommerce Shopping Cart',
          category: 'Web Development'
        }
      ]
    }
  }

  render() {
    return (
      <div className="App">
        My App
        <Projects projects={this.state.projects}/>
      </div>
    );
  }
}

export default App;

我想使用 Jquery 从远程位置加载数据。我试过了

this.state =  $.getJSON('remote.json', function (data) {
        console.log(data);
});

不幸的是，在运行网站时，我收到一个错误:“$”未定义。我怎样才能解决这个问题？请注意，我包括

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

在index.html的头部

编辑:请记住，JSON 文件不是本地的。

Answer 1

据我了解，您想在项目中使用 jquery。要解决您的问题，您只需安装 jquery 并将其包含在您的项目中，就像在您的命令行中一样:

npm install --save jquery

然后在使用jquery的文件上导入它:

import $ from 'jquery';

看起来您正在尝试根据 getJSON 方法的结果设置状态，正确的做法应该是这样的:

$.getJSON('remote.json',(data) => {
  this.setState({ myStateData: data })
});

另一种方法是使用 fetch ，您的代码将如下所示:

fetch('remote.json').then(data => this.setState({ myStateData: data }));

以上示例假设您的状态具有属性 myStateData。