React Node.js MySQL Uncaught ReferenceError : le processus n'est pas défini

Question

J'essaie d'implémenter une page de recherche sur mon site Web. L'utilisateur doit pouvoir saisir un mot-clé et le site Web doit renvoyer les lignes de la table des produits contenant ce mot-clé de la base de données.

J'obtiens cette erreur lorsque j'essaie d'établir une connexion à la base de données

_stream_writable.js:57 Uncaught ReferenceError : le processus n'est pas défini
    à ./node_modules/mysql/node_modules/readable-stream/lib/_stream_writable.js (_stream_writable.js:57:1)
    sur options.factory (react rafraîchir : 6 : 1)
    à __webpack_require__ (bootstrap:24:1)
    à fn (remplacement du module à chaud : 62:1)
    à ./node_modules/mysql/node_modules/readable-stream/readable-browser.js (readable-browser.js:4:1)
    sur options.factory (react rafraîchir : 6 : 1)
    à __webpack_require__ (bootstrap:24:1)
    à fn (remplacement du module à chaud : 62:1)
    à ./node_modules/mysql/lib/protocol/sequences/Query.js (Query.js:7:1)
    à options.factory (react rafraîchir : 6 : 1)

Il s'agit du fichier Search.jsx.我创造

<code> importer {Component} depuis "react" ;
importer ItemDisplay depuis "./itemDisplay" ;
importer un élément depuis "./item" ;
importer { test } depuis "./DB_functions" ;


La recherche de classe étend le composant{
    constructeur() {
        super();

        ceci.état = {
            articles: []
        }

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        

    }

    handleChange(événement) {
        this.setState({value : event.target.value});
    }

    handleSubmit (événement) {
        console.log(this.state.value);
        alert('Un nom a été soumis : ' + this.state.value);// au lieu de cela, nous envoyons this.state.val en arrière
        
        
        var entrée = this.state.value.toLowerCase()
        
        //recherche dans les produits AWS
        var mysql = require('mysql');
        alert("SQL requis");
        var sql = "SELECT * FROM products WHERE productName = ?"
        var con = mysql.createConnection({
          hôte : "[Supprimé]",
          utilisateur : "[Supprimé]",
          mot de passe : "[Supprimé]", 
          port : '3306',
          base de données : "hs_db"
        });
        alert("Connexion établie");
        con.query (sql, entrée, fonction (erreur, résultat)
        {
            alert("Requête envoyée");
            si (erreur) 
                jeter l'erreur;
            autre
                var usersRows = JSON.parse(JSON.stringify(result));
                pour (soit i = 0; i<usersRows.length; i++){
                    if(usersRows[i]['name'].includes(input));{
                        console.log(usersRows[i]['nom'])
                        this.state.items.push(usersRows[i]['name']);
                    }
                }
                console.log(usersRows);
        })
        con.end();

        var éléments = this.state.items
        // // c'était une recherche de démonstration
        // éléments const = [];
        // pour (soit i = 0; i<this.state.orgitems.length; i++){
        // if (this.state.orgitems[i].name.toLowerCase().includes(this.state.value.toLowerCase())){
        // console.log(this.state.orgitems[i].name)
        // items.push(this.state.orgitems[i]);
        // }
        // }

        this.setState({éléments});

        // fin de la démo
        event.preventDefault(); // reçoit des données, puis les transmet
    }rendre() {
        retour(

            <div class='m-2'>


                <div className="input-group">
                    <type d'entrée="recherche" className = "form-control arrondi" placeholder="Rechercher" aria-label="Rechercher"
                           aria-describeby = " module complémentaire de recherche " onChange={this.handleChange}/>
                    <button onClick={this.handleSubmit} type="bouton" className="btn btn-outline-dark">recherche</bouton>
                </div>
                <ItemDisplay items={this.state.items}></ItemDisplay>
            </div>
        );
    }
}




exporter la recherche par défaut ;
</code>

<code>var con = mysql.createConnection({
          hôte : "[Supprimé]",
          utilisateur : "[Supprimé]",
          mot de passe : "[Supprimé]", 
          port : '3306',
          base de données : "hs_db"
        });
</code>

常模糊，因此很难调试

Answer 1

Ne donnez jamais aux utilisateurs l’accès à votre base de données sur le front-end. Afin d'accomplir ce que vous souhaitez faire, vous devez créer un serveur backend et communiquer avec lui à l'aide de requêtes HTTP.

Vous trouverez un tutoriel expliquant comment procéder ici.