未定义'$'no-undef reactjs ajaxcall

Question

我试图基于此answer以表格格式显示json数据。每次运行此命令时，都会显示此错误Line 15: '$' is not defined no-undef。我在第15行开始ajax调用。我尝试在代码顶部添加const $ = window.$;，但这并不能解决任何问题。

class App extends React.Component {
    constructor(){
      super() 
        this.state = {
          data: []
        }
      
    }
    componentDidMount() {
      $.ajax({
         url: "http://www.mocky.io/v2/5c3f2a6c3500004d00ec3789",
         type: "GET",
         dataType: 'json',
         ContentType: 'application/json',
         success: function(data) {
           
           this.setState({data: data});
         }.bind(this),
         error: function(jqXHR) {
           console.log(jqXHR);
         }.bind(this)
      })
    }
    render() {
      
          
      return (
        <table>
        <tbody>{this.state.data.map(function(item, key) {
               
                 return (
                    <tr key = {key}>
                        <td>{item.name}</td>
                        <td>{item.post}</td>
                        <td>{item.country}</td>
                        <td>{item.contact}</td>
                    </tr>
                  )
               
               })}</tbody>
         </table>
      )
    }
  }
  


ReactDOM.render(<App />, document.getElementById('root'));

对错误有帮助吗？

Answer 1

您需要包括jQuery库。

import $ from 'jquery'; 

确保已安装jquery软件包。

Answer 2

您甚至可能不需要在React中使用jQuery，浏览器公开的fetch API可以正常工作。与其安装整个jQuery库来仅处理Ajax请求，不如使用axios来代替，我认为它比jQuery轻巧。

Answer 3

使用create-react-app时，首先您需要安装Jquery软件包。

sudo npm install jquery --save 

现在在JS文件中，您可以使用jquery

import $ from 'jquery';