React Node.js MySQL Uncaught ReferenceError: Prozess ist undefiniert

Question

Ich versuche, eine Suchseite in meine Website zu implementieren. Der Benutzer sollte in der Lage sein, ein Schlüsselwort einzugeben, und die Website sollte Zeilen aus der Produkttabelle zurückgeben, die dieses Schlüsselwort aus der Datenbank enthalten.

Ich erhalte diese Fehlermeldung, wenn ich versuche, eine Verbindung zur Datenbank herzustellen

_stream_writable.js:57 Nicht abgefangener ReferenceError: Prozess ist nicht definiert
    unter ./node_modules/mysql/node_modules/readable-stream/lib/_stream_writable.js (_stream_writable.js:57:1)
    bei options.factory (React Refresh:6:1)
    bei __webpack_require__ (bootstrap:24:1)
    bei fn (Hot-Modul-Austausch:62:1)
    unter ./node_modules/mysql/node_modules/readable-stream/readable-browser.js (readable-browser.js:4:1)
    bei options.factory (React Refresh:6:1)
    bei __webpack_require__ (bootstrap:24:1)
    bei fn (Hot-Modul-Austausch:62:1)
    unter ./node_modules/mysql/lib/protocol/sequences/Query.js (Query.js:7:1)
    bei options.factory (React Refresh:6:1)

Dies ist die Search.jsx-Datei.我创造

<code>import {Component} from "react";
importiere ItemDisplay aus "./itemDisplay";
Artikel importieren aus "./item";
import { test } from "./DB_functions";


Klassensuche erweitert Component{
    Konstrukteur() {
        super();

        this.state = {
            Artikel: []
        }

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

    }

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

    handleSubmit(event) {
        console.log(this.state.value);
        Alert('Ein Name wurde übermittelt: ' + this.state.value);// Stattdessen senden wir this.state.val an back
        
        
        var input = this.state.value.toLowerCase()
        
        //Suche in AWS-Produkten
        var mysql = require('mysql');
        alarm("SQL erforderlich");
        var sql = "SELECT * FROM products WHERE productName = ?"
        var con = mysql.createConnection({
          host: "[Entfernt]",
          Benutzer: "[Entfernt]",
          Passwort: "[Entfernt]", 
          Port: '3306',
          Datenbank: "hs_db"
        });
        Alert("Verbindung hergestellt");
        con.query(sql, input, function(err, result)
        {
            Alert("Anfrage gesendet");
            wenn (irrt) 
                wirf irr;
            anders
                varuserRows = JSON.parse(JSON.stringify(result));
                for (let i = 0; i<usersRows.length; i++){
                    if(usersRows[i]['name'].includes(input));{
                        console.log(usersRows[i]['name'])
                        this.state.items.push(usersRows[i]['name']);
                    }
                }
                console.log(usersRows);
        })
        con.end();

        var items = this.state.items
        // // Das war eine Demo-Suche
        // const items = [];
        // for (let 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({items});

        // Demo beenden
        event.preventDefault(); // Daten empfangen und dann Daten übergeben
    }render() {
        zurückkehren(

            <div class='m-2'>


                <div className="input-group">
                    <Eingabetyp="Suche" className="form-control abgerundet" placeholder="Suchen" aria-label="Suchen"
                           aria-describedby="search-addon" onChange={this.handleChange}/>
                    <button onClick={this.handleSubmit} type="button" className="btn btn-outline-dark">search</button>
                </div>
                <ItemDisplay items={this.state.items}></ItemDisplay>
            </div>
        );
    }
}




Standardsuche exportieren;
</code>

<code>var con = mysql.createConnection({
          host: "[Entfernt]",
          Benutzer: "[Entfernt]",
          Passwort: "[Entfernt]", 
          Port: '3306',
          Datenbank: "hs_db"
        });
</code>

常模糊，因此很难调试

Answer 1

永远不要让用户在前端访问您的数据库。为了完成您想做的事情，您需要创建一个后端服务器并使用 HTTP 请求与其通信。

您将找到有关如何执行此操作的教程 此处。