javascript - ReactJS の API へのマッピング

Question

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形式の正確なマッピングを知りたいです。私を助けてください。ありがとう