web-dev-qa-db-fra.com

JQuery in React n'est pas défini

Bonjour, je veux juste recevoir une requête ajax, mais le problème est que jquery n'est pas défini dans React. React la version est 14.0

Message d'erreur

 Uncaught ReferenceError: $ is not defined

j'ai deux fichiers:

index.js

import React from 'react'; 
import { render } from 'react-dom';
import App from './containers/App';  

const root = document.getElementById('root');  

render( 
  <App source='https://api.github.com/users/octocat/gists' />, 
  root
);

app.js

import React, { Component } from 'react';

export default class App extends Component {

    componentDidMount() {
        const { source } = this.props;

        console.log($); // throws error
    }

    render() {
        return (
            <h1>Hey there.</h1>
        );
    }
}
javascriptjqueryajaxreactjs
49
Machycek

Essayez d'ajouter jQuery à votre projet, comme

npm i jquery --save

ou si vous utilisez bower

bower i jquery --save

ensuite

import $ from 'jquery';
268
Alexander T.

Je veux juste recevoir une requête ajax, mais le problème est que jQuery n'est pas défini dans React.

Alors ne l'utilisez pas. Utilisez Fetch et jetez un oeil à Fetch polyfill in React ne fonctionne pas complètement dans IE 11 =) voir des exemples de solutions alternatives pour le faire fonctionner

Quelque chose comme ça

const that = this; 
fetch('http://jsonplaceholder.typicode.com/posts') 
  .then(function(response) { return response.json(); }) 
  .then(function(myJson) { 
     that.setState({data: myJson}); // for example
  });
5
mplungjan

N’est pas plus facile que de faire comme:

1- Installez jquery dans votre projet:

yarn add jquery

2- Importez jquery et commencez à jouer avec DOM:

import $ from 'jquery';
0
MUSTAPHA GHLISSI

Juste une remarque: si vous utilisez des fonctions de flèche, vous n'avez pas besoin du const que = cette partie. Cela pourrait ressembler à ceci:

fetch('http://jsonplaceholder.typicode.com/posts') 
  .then((response) => { return response.json(); }) 
  .then((myJson) => { 
     this.setState({data: myJson}); // for example
});
0
Zach Robichaud