Reagieren JS & Express - Filter Ajax Antwort

Question

Ich arbeite an einer MERN (Mongo, Express, React, Node) App. Ich verwende Ajax, um Daten von meiner Mongo-Datenbank zu erhalten. Der nächste Schritt besteht darin, die Antwort mit einer Abfrage in der Get-Anfrage zu filtern. Allerdings bin ich irgendwo falsch gelaufen und brauche ein wenig Hilfe. Die Abfrage wird gesendet, wenn der Benutzer auf die Schaltfläche "Test Filter" klickt übergeben, um auszudrücken, da alle Ergebnisse noch zurückgegeben werden.

Ich habe beide relevanten Komponenten und auch meinen Express-Server-Code zur Verfügung gestellt.

TL; DR: Buglist-Komponente wird Liste der Bugs von Mongo über Json mit unterschiedlichen Prioritäten. Taste innerhalb BugFilter sollte Antwort filtern und Zustand mit nur aktualisieren 'Priorität: P1' Ergebnisse

Buglist Komponente:

class BugList extends React.Component { 

    constructor() { 
    super(); 
    this.state = { 
     bugs: [] 
    } 
    this.loadData = this.loadData.bind(this); 
    } 

    render() { 
    console.log("Rendering bug list, num items:", this.state.bugs.length); 
    return (
     <div> 
     <h1>Bug Tracker</h1> 
     <BugFilter submitHandler={this.loadData}/> 
     <hr /> 
     <BugTable bugs={this.state.bugs}/> 
     <hr /> 
     <BugAdd addBug={this.addBug.bind(this)} /> 
     </div> 
    ) 
    } 

    componentDidMount() { 
     this.loadData({}); 
    } 

    loadData(filter) { 
    $.ajax('/api/bugs', {data: filter}).done(function(data) { 
     this.setState({bugs: data}); 
    }.bind(this)); 
    } 

    addBug(bug) { 
    console.log("Adding bug:", bug); 
    $.ajax({ 
     type: 'POST', url: '/api/bugs', contentType: 'application/json', 
     data: JSON.stringify(bug), 
     success: function(data) { 
     var bug = data; 
     // We're advised not to modify the state, it's immutable. So, make a copy. 
     var bugsModified = this.state.bugs.concat(bug); 
     this.setState({bugs: bugsModified}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     // ideally, show error to user. 
     console.log("Error adding bug:", err); 
     } 
    }); 
    } 
} 

Filter Komponente:

class BugFilter extends React.Component { 
    render() { 
    console.log("Rendering BugFilter"); 
    return (
     <button onClick={this.submit.bind(this)}>Test Filter</button> 
    ) 
    } 

    submit(e) { 
    this.props.submitHandler(
     {priority: "P1"} 
    ) 
    } 
} 

Express Server:

app.get('/api/bugs', function(req, res) { 
    console.log("Query string", req.query); 
    var filter = {}; 
    if (req.query.priority) 
    filter.priority = req.query.priority; 
    if (req.query.status) 
    filter.status = req.query.status; 
    db.collection("bugs").find().toArray(function(err, docs) { 
    res.json(docs); 
    }); 
}); 


app.use(bodyParser.json()); 
app.post('/api/bugs/', function(req, res) { 
    console.log("Req body:", req.body); 
    var newBug = req.body; 
    db.collection("bugs").insertOne(newBug, function(err, result) { 
    var newId = result.insertedId; 
    db.collection("bugs").find({_id: newId}).next(function(err, doc) { 
     res.json(doc); 
    });`` 
    }); 
}); 

Answer 1

Ich hatte eigentlich das Bestehen der ‚Filter‘, um die Funktion .get finden verpassten