Reactjs 将按钮值从react传递到express

我正在尝试创建一个react应用程序，它在express服务器中调用api并显示数据。用户可以按一些按钮，这些按钮的值将被传递到api中，并显示正确的结果

我的问题是将按钮值从react传递到express。我尝试了req.params.query，但它返回未定义的。请注意，按钮值来自不同的组件

App.js

类应用程序扩展组件{
状态={
数据：{}，
};
search=async（query）=>{res.json（））
.then（（数据）=>console.log（数据））；//暂时记录控制台日志
};
render（）{
const{data}=this.state；
返回(
);
}
}

server.js

const url=GET_CHANNEL_ID+“硬编码结果”+API_键；
app.get（'/api'，异步（req，res）=>{
console.log（req.params.query）；{您需要在fetch函数中将查询参数添加到URL中：

search = async (query) => {
  // add query param to URL
  fetch(`/api?query=${query}`)
    .then((res) => res.json())
    .then((data) => console.log(data));
};

然后，对于服务器，您可以访问
req.query
对象以获取所有查询参数：

const url = GET_CHANNEL_ID + 'hard coded result' + API_KEY; 

app.get('/api', async (req, res) => {
  console.log(req.query); // { query: 'whatever you sent in fetch' }
  request(url, (error, response, body) => {
    if (!error && response.statusCode == 200) {
      var info = JSON.parse(body);
      res.send(info.items[0]);
      console.log(info); 
    }
  });
});

假设您有一个解析中间件设置（因为后来的Express版本去掉了大多数中间件），那么它应该位于
req.query
下，并且您需要作为参数传递。因此在前端您需要：

fetch(`/api?q=${query}`)

然后在您的服务器中有中间件，例如，
body解析器

import bodyParser from 'body-parser';
...
app.use(bodyParser.json());

那么，对于您的路线：

app.get('/api', async (req, res) => {
    console.log(req.query); // this should contain params object, with the query parameter under the 'q' property
    ...
});

req.params.query在express中仍然未定义。Edit-req.query提供了{query:'Value'}如何删除查询部分？req.query.id返回未定义的答案以包括服务器部分。我已经安装了bodyParser，谢谢，我现在获得了查询参数。但是有没有简单的方法删除q=“”部分，只留下值？您必须以某种方式传递参数。获取请求需要给定该值，否则它将如何知道。您可以在此处查看一些答案，了解向请求添加参数的各种方法，但它们基本上都是将其添加到URL字符串的不同方法：抱歉，我本应该澄清更多。我在express中的意思是，在将q=”“传递到我的api之前，我如何在express中去掉它。您是指在将其传递到
请求（url）之前，（错误，
路由中的一部分？由于该值是动态的，您不能将该URL定义为字符串，它需要是一个函数，类似于
const URL=（query）=>GET\u CHANNEL\u ID+query+API\u KEY；
。然后在路由中您可以执行
请求（URL（req.query.q），（错误，
谢谢！非常感谢您的帮助：）
import bodyParser from 'body-parser';
...
app.use(bodyParser.json());

app.get('/api', async (req, res) => {
    console.log(req.query); // this should contain params object, with the query parameter under the 'q' property
    ...
});