如何在反应中存储 twitter API 响应并稍后在组件中使用答案

【问题标题】：How to store a twitter API response in react and use on later in components如何在反应中存储 twitter API 响应并稍后在组件中使用
【发布时间】：2019-06-13 06:07:19
【问题描述】：

我需要帮助来保存来自 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.
});

【问题讨论】：

请记住，如果您将密钥和秘密存储在 React 中，即使代码被监控，也可以使用开发工具或类似工具提取。存储在客户端上并不安全。
非常感谢！在本地开发中使用它的最佳方式是什么？关于如何进行此 API 调用，您有什么建议？
不管凭证管理，你考虑过 React’a Context API 还是 Redux？
我去看看谢谢！

标签： javascript json reactjs api twitter

【解决方案1】：

问题是在前面，没有什么是私密的。最好的方法是拥有你的后端，我认为使用节点并将其保存在进程环境变量中。

【讨论】：

【解决方案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 });
    }}
  )})

现在我可以 GET 到 /api/post 并且 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;

【讨论】：