在 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。

Answer 2

你可以配置你的 webpack，而不是使用 Jquery 来加载 localJSON 文件

首先安装json-loader

npm i json-loader --save-dev

然后用这个加载器配置你的 webpack

loaders: [
  { test: /\.json$/, loader: 'json' },
  // other loaders 
]

现在你可以在你的文件中导入你的json了

   import remote from '.path/to/remote.json';

但是，如果您的 json 文件是远程的，您有多种选择来执行 ajax 请求

您可以使用 axios、node-fetch、jquery 等软件包

由于您使用的是 jquery ，您应该安装

   npm install -S jquery

并导入为

  import $ from 'jquery'