React JS & Express - 过滤 ajax 响应

Question

我正在开发一个 MERN（Mongo、Express、React、Node）应用程序。我正在使用 Ajax 从我的 Mongo 数据库中获取数据。

下一步是使用获取请求中的查询过滤响应，但是我在某个地方出错了需要一点帮助，当用户单击“测试过滤器”按钮时发送的查询似乎没有通过表示所有结果仍在返回中。

我已经提供了相关组件和我的快速服务器代码。

TL;DR: Buglist 组件通过 Json 从 Mongo 获取具有不同优先级的错误列表。 BugFilter 中的按钮应仅使用“优先级：P1”结果过滤响应和更新状态

Buglist 组件：

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);
      }
    });
  }
}

过滤器组件：

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"}
    )
  }
}

快递服务器：

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

我实际上错过了将“过滤器”传递给 .get 查找函数