Как сохранить ответ Twitter API в реакции и использовать его позже в компонентах

Question

Мне нужна помощь в сохранении ответа от Twitter API, а затем в последующем его использовании в родительском компоненте, в конце концов, в качестве поддержки дочерних компонентов в проекте React. Я использую пакет под названием твиттер, который использует приобретенные учетные данные для звонка.

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

Вы должны сделать что-то вроде того, что я сделал:

код на стороне сервера:

Основной компонент:

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

Теперь я могу сделать GET для / api / post, а экспресс будет перенаправлен на client.get и вернуть твиты.

См. Мой React Component:

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;

Answer 2

Проблема в том, что спереди нет ничего личного. Лучше всего иметь свой бэкэнд, я думаю, с помощью узла и сохранить его в переменных процесса env.