如何在响应中存储twitter API响应并在以后的组件中使用

Question

我需要帮助保存来自Twitter API的响应，然后在父组件中使用它，最后将其作为道具传递给React项目中的子组件。我正在使用一个名为twitter的软件包，它使用获取的凭据进行调用。

var Twitter = require('twitter');

var client = new Twitter({
    consumerKey: "",
    consumerSecret: "",
    bearer_token: '',
    port: ""
});

client.get('statuses/user_timeline', function(error, tweets, response) {
    if(error) throw error;
    console.log(tweets);  // The favorites.
    console.log(response);  // Raw response object.
}); 

Answer 1

问题在于，在前面，没有什么是私密的。最好的方法是让你的后端，我认为与节点并保存在过程env变量。

Answer 2

你必须做我喜欢的事情：

服务器端代码：

主要成分：

const express = require('express');
const server = express();
const path = require('path');   
const tweets = require ('./tweets')
const distFolder = path.join(__dirname, '../my-app/build')

server.use("/api/tweets", tweets, function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  next();
}
)

server.use(express.static(distFolder))

server.listen(process.env.PORT || 9090)

tweets.js组件：

    router.get('/', (req, res) => {
  client.get('statuses/user_timeline', params, function(error, tweets, response) {    
    if (!error) {     
      res.send(tweets);          
    } 
    else {
      res.status(500).json({ error: error });
    }}
  )})

现在我可以对/ api / post进行GET，并将express重定向到client.get并返回推文。

看我的React组件：

lass Notifications extends Component {
  constructor(props) {
    super(props);

    this.state = {
      hits: [],
      isLoading: false,
      error: null,
    };
  }

  componentDidMount() {
    this.setState({ isLoading: true });

    Axios.get('http://127.0.0.1:9090/api/tweets'
    ,{
     headers: {
      'Access-Control-Allow-Origin': '*',          
     }}
    )   
    .then(result => this.setState({
        hits: result.data,
        isLoading: false
    }))
    .catch(e => console.log(e));
  }
    render() {    
const { hits, isLoading } = this.state;    
if (isLoading) {
  return (
    <div className='feed_main'>       
          <h2 className="js-ariaTitle">
            Loading...
          </h2>
        </div>
  )
}
else {
  return hits.map((data) =>    
    <div className='feed_main'>
      <strong className="fullname">{data.user.name}</strong>
      <article
        key={data.id}
      >{data.text}
      </article>
      <br />          
        </div>
      )
    }
  }
}    

export default Notifications;