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

问题在于，在前面，没有什么是私有的。最好的方法是拥有后端，我认为与node并将其保存在过程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进行获取，并且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;

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

2 个答案: