Question

我正在研究MERN（Mongo，Express，React，Node）应用程序。我正在使用Ajax从Mongo数据库中获取数据。

下一步是使用get请求中的查询过滤响应，但是我在某处出错并需要一点帮助，当用户点击＆＃34;测试过滤器＆＃34;按钮似乎没有传递给表达，因为仍然返回所有结果。

我提供了相关的组件以及我的快速服务器代码。

TL; DR： Buglist组件通过Json以不同的优先级获取来自Mongo的错误列表。 BugFilter中的按钮应该仅使用＆＃39;优先级来过滤响应并更新状态：P1＆＃39;结果

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

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

我错过了实际将'过滤器'传递给.get查找功能

React JS＆amp;快递 - 过滤ajax回复

1 个答案: