Question

我正在尝试将一些URL参数从react组件传递到单独文件中的数据库查询。以下是我正在尝试做的细分：

TL; DR：当我尝试查询数据库时，api请求似乎没有定义类别和城市字段。

1）从搜索表单组件中抓取搜索参数

<Link to={"tours"+"/" + this.state.category + "/" + this.state.city} >

2）用户点击搜索，重定向到搜索结果组件。重定向后，将调用此函数。正如我所料，道具是用搜索表单中的参数打印的。

componentDidMount: function() {

// console.log(this.props.route);

console.log(this.props.params.category);
console.log(this.props.params.city);

var category = this.props.params.category;
var city = this.props.params.city;

helpers.viewTours(
{
  cat: category,
  cit: city
}
).then(function(response){
    var tours = response.data.length ? response.data[0].tour_title : 0;
    console.log("RESPONSE " + response);
    console.log("RESPONSE LENGTH " + response.data.length);
    console.log("RESULTS ", tours);
    //this.setState({trekList: response});
})

}，

3）使用包装函数（helpers.viewTours）我想将这些参数从搜索表单传递到数据库查询

  viewTours: function(searchParams){

console.log("search params " + searchParams);
return axios.get("/tours/search", searchParams);

}，

4）调用此方法，但参数未定义

  router.get("/search", function(req, res){
  var category = req.body.cat;
  var city = req.body.cit;
  console.log("tours cat " + category);
  console.log("tours cit " + city);
  Tour.find({}, function(error, doc) {
    // Send any errors to the browser
    if (error) {
      res.send(error);
    }
    // Or send the doc to the browser
    else {
      res.send(doc);
      //return doc;
    }
  });

});

谢谢，

Answer 1

根据axios文档axios.get(url, [config])，其中config可以通过请求发送数据，例如params字段或data字段。 data字段对GET请求无效。

您可以尝试以下方法将params发送到后端。

viewTours: function(searchParams){
   console.log("search params " + searchParams);
   return axios.get("/tours/search", { params: searchParams });
},

在服务器端，使用req.params从网址获取参数。

router.get("/search", function(req, res){
   var category = req.params.cat;
   var city = req.params.city;
   // rest of code
})

请求参数显示为未定义

1 个答案: