如何在REACTjs中显示Twitter搜索API JSON文件中的字段？

Question

所以我正在尝试使用搜索API来创建自定义Twitter提要并做出反应，我设法通过使用访存和承载令牌等来检索JSON文件。

但是我不确定如何显示它。我有一个文件定义了布局，主要是通过引用这个github项目来获得的]

https://github.com/kakaly/twitter-feed

但是我不确定如何仅显示特定字段-我只想显示名称，screen_name，tweet。

class TheContent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: {}
    };
  }

  handleRefresh() {
    return new Promise(resolve => {
      this.loadTweet();
    });
  }

  componentDidMount() {
    const details = {
      grant_type: "client_credentials"
    };

  loadTweet = bearerToken => {
    console.log("start load tweet");
    let results;
    fetch(
      "https://cors-anywhere.herokuapp.com/https://api.twitter.com/1.1/search/tweets.json?q=education%20online%20courses%20learning",
      {
        method: "GET",
        headers: {
          Authorization: "Bearer " + bearerToken
        }
      }
    )
      .then(response => response.json())
      .then(responseData => {
        this.setState({ tweets: responseData });
        console.log(JSON.stringify(responseData));
      })
      .then(data => {
        this.setState({
          users: [
            {
              name: data.results[0].name,
              handle: data.results[0].screen_name,
              tweet: data.results[0].text
            },
            ...this.state.users
          ]
        });
      })
      .catch(error => {
        console.error(error);
        alert("Alert Title failure" + JSON.stringify(error));
      });
  };

  render() {
    return (
      <PullToRefresh
        pullDownContent={<PullDownContent />}
        releaseContent={<ReleaseContent />}
        refreshContent={<RefreshContent />}
        pullDownThreshold={2}
        onRefresh={this.handleRefresh}
        triggerHeight={50}
        backgroundColor="black"
      >
        <div className="main-body">
          {[...this.state.users].map((user, index) => {
            let name = user.name;
            let handle = user.handle;
            let tweet = user.tweet;
            return (
              //    <p>something</p>
              <TweetBody name={name} handle={handle} tweet={tweet} />
            );
          })}
        </div>
      </PullToRefresh>
    );
  }
}
export default TheContent;

我删除了代码部分，在其中我检索了承载令牌和其他工作正常且不重要的部分/不影响其余部分，因为我设法检索了JSON文件，但是我无法显示它。

Answer 1

使您的初始用户声明一个数组，因为您要存储对象数组。

this.state = {
    users:[],
}

然后

.then(data => {
 this.setState({users:data})
})