Question

我需要将搜索查询从我的前端（在React中）传递到我的后端（Express），以便我的Twitter API路由将获取正确的数据。这是我点击Twitter API的地方。我只是在玩一个req.query来检查JSON，所以我知道这个部分需要删除。

tweets.js

var express = require('express');
var router = express.Router();
const bodyParser = require('body-parser');
const Twit = require('twit');
const config = require('./config');

var T = new Twit(config);

/* GET users listing. */
router.get('/', function(req, res, next) {
      let ticker = req.query.ticker;
      T.get('search/tweets', { q: ticker })
          .then(function(result) {
            var tweets = result.data;
            console.log(tweets);
            res.send({tweets});
          })
          .catch(function(err) {
            console.log('caught error', err.stack)
            res.send({ error: err })
          })
      })

module.exports = router;

另请注意路线在快递

中设置如下

app.use('/tweets', tweets);

这是我在React的前端（暂时忽略了实际的搜索组件）。只是混淆了我将如何发送搜索查询

import React, { Component } from 'react';
import '../App.css';


const filterData = (tweet) => {
    return ((!tweet.retweeted) && !(tweet.text.includes('RT @') && ((tweet.in_reply_to_status_id) === null)));
  };

class Twitter extends Component {
  constructor(props) {
    super(props);
    this.state = {
        tweets:[],
    }
   }

  componentDidMount() {
    this.getData("GOOG");
   }

  getData = (query) => {
     fetch('/tweets?ticker='+query)
      .then(res => res.json())
      .then(data => data.statuses)
      .then(statuses => statuses.filter(filterData))
      .then(results => this.setState({tweets:results}))
  }


  render() {
    return (
      <div className="App">
      <h1>Tweets About </h1>
           {this.state.tweets.map(tweet =>
              <div key={tweet.id}>{tweet.text}</div>
              )}
      </div>
    );
  }
}

export default Twitter;

Answer 1

问题出在这一行。

错了一个

fetch('/tweets?ticker={query)') <-- this is wrong

纠正一个

     const filterData = (tweet) => {
    return ((!tweet.retweeted) && !(tweet.text.includes('RT @') && ((tweet.in_reply_to_status_id) === null)));
  };

class Twitter extends Component {
  constructor(props) {
    super(props);
    this.state = {
        tweets:[],
    }
   }

  componentDidMount() {
    this.getData("GOOG");
   }

  getData = (query) => {

     fetch(`http://localhost:3001/tweets?ticker=${query}`, {method: 'GET', headers: {"Content-Type": "application/json", "Access-Control-Allow-Origin": "*"}})
      .then(res => res.json())
      .then(data => data.statuses)
      .then(statuses => statuses.filter(filterData))
      .then(results => this.setState({tweets:results}))
  }

  renderTweets(){
    if(this.state.tweets){
      this.state.tweets.map(tweet =>
        <div key={tweet.id}>{tweet.text}</div>
      )
    }
  }
  render() {
    return (
      <div className="App">
      <h1>Tweets About </h1>
           {this.state.tweets ? this.renderTweets(): ''}
      </div>
    );
  }
}

export default Twitter;

使用模板文字

fetch(`/tweets?ticker=${query}`)

OR

使用普通字符串

fetch('/tweets?ticker='+query)

检查here以获取有关模板文字如何工作的更多详细信息。你的代码现在应该没问题。

获取API - 如何从前端发送查询到后端？

1 个答案: