ReactJS 映射到 API答案

【问题标题】：ReactJS mapping to APIReactJS 映射到 API
【发布时间】：2018-06-10 20:24:52
【问题描述】：

import React, { Component } from 'react';
import axios from 'axios';

class Meetups extends Component {

  constructor(props) {
    super(props);
    console.log('in constructor');
    this.state = {
      results: [],
    };
  }

 componentDidMount() {
  console.log('meetup feed');
   axios.get('https://api.meetup.com/2/categories?offset=0&format=json&photo-host=public&page=20&order=shortname&desc=false&sig_id=211627025&sig=ae69aec13f23c7837cd55c5a68b99e00719fa225')
  //response
  .then(response => response.json())
  .then(data => this.setState({results:data.results}));
 }
  render() {
    const {results} =this.state;
    return(
      <div>
      {results.map(result =>
        <div key={result.id} className='container'>
            {result.name}
        </div>
      )}
    </div>
     );
    }
}

export default Meetups;

我收到的 JSON 格式：

{
    "results": [
        {
            "name": "Arts & Culture",
            "sort_name": "Arts & Culture",
            "id": 1,
            "shortname": "Arts"
        },
        {
            "name": "Book Clubs",
            "sort_name": "Book Clubs",
            "id": 18,
            "shortname": "Book Clubs"
        },
        {
            "name": "Career & Business",
            "sort_name": "Career & Business",
            "id": 2,
            "shortname": "Business"
        }
]
}

我正在尝试在我的项目中使用 Meetup API。但无法与之连接。映射可能有问题。我想知道给定 json 格式的确切映射。请帮帮我。谢谢

【问题讨论】：

你期望得到什么？
json 文件中的名称
axios.get(..) 是否抛出异常？尝试在.then(data => this.setState({results:data.results})) 之后添加一个.catch(..) 处理程序，看看它是否被调用。 - 换句话说，setState(...) 有可能没有在这里被调用。
无法加载api.meetup.com/2/…：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'localhost:3000'。
如上所述是meetup api The Meetup API supports the CORS specification which allows browser clients hosted on a domain other than api.meetup.com to communicate directly with the API. The API uses OAuth consumer redirect uris to validate a request's origin, so you must be using OAuth to benefit from CORS. 所以基本上你需要获得授权或使用JSONP

标签： javascript reactjs api meetup

【解决方案1】：

import React, { Component } from 'react';
import axios from 'axios';

class Meetups extends Component {

  state = {
    results: []
}
componentDidMount() {
    axios.get('https://api.meetup.com/2/categories?offset=0&format=json&photo-host=public&page=20&order=shortname&desc=false&sig_id=211627025&sig=ae69aec13f23c7837cd55c5a68b99e00719fa225')
        .then(response => {
            let results = response.data.results;
            this.setState({ results: results });
            console.log(response);
        })

}
render() {
    let studentsDisplay = (
        this.state.results.map( (result, index) =>  
        <div  key={index} className="card" style= { {width: '18rem'} }>
            {result.name}
            <br/>
            {result.shortname}
        </div>

    ));
    return (
        <div className='container'>
            {
                studentsDisplay     
            }
        </div>
    );
}
}

export default Meetups;

【讨论】：

对上述代码的解释会很有用，而不仅仅是代码本身