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 格式的确切映射。请帮帮我。谢谢

Answer 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;