将按钮值从反应传递到表达

Question

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

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

App.js

 class App extends Component {
  state = {
    data: {},
  };

  search = async (query) => { <-- query returns button value
    fetch('/api')
      .then((res) => res.json())
      .then((data) => console.log(data)); // console log for now
  };

  render() {
    const {data} = this.state;
    return (
      <div>
        <div className={styles.container}>
          <Tables data={data} />
        </div>
      </div>
    );
  }
}

server.js

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

app.get('/api', async (req, res) => {
  console.log(req.params.query); <-- undefined
  request(url, (error, response, body) => { <-- this works fine
    if (!error && response.statusCode == 200) {
      var info = JSON.parse(body);
      res.send(info.items[0]);
      console.log(info); 
    }
  });
});

Answer 1

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

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

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

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

Answer 2

您需要在 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); 
    }
  });
});