Ошибка типа: this.state.dashboarddata.map не является функцией

Question

Я не могу отобразить объект внутри массива, он всегда выдает ошибку.Не уверен, почему это происходит.

Я также проверил с массивом, но не повезло.

Ниже мой App.js

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dashboarddata: [],
    }
  }

  componentDidMount() {
    fetch('http://www.mocky.io/v2/5d8f41e63200004d00adebcd', {
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }

    })
      .then((response) => response.json())
      .then(dashboarddata => this.setState({ dashboarddata }));
  }

  render() {

    const { dashboarddata } = this.state;

    //console.log(dashboarddata);

    return (
      <div>
        <div className="campaign-status">
          {this.state.dashboarddata.map((dynamicData) =>
            <div>{dynamicData.total_subscribers}</div>    
          )}
          <CampaignStatus status = {this.state.dashboarddata} />
        </div>
      </div>

    );
  }
}

export default App;

Ниже представлен мой формат Json

{
  "total_subscribers": 250000,
  "total_campaign": 400,
  "page_info": [
        {
            "total_pages": 20,
            "total_items": 387
        }
  ],
  "subscriber_data": [
    {
      "sub_name": "User1",
      "email": "user1@gmail.com",
      "contest_id": "115",
      "createdAt": 1569628118967,
      "phone": 971582384662,
      "country": "bahrain",
      "gender": "female"
    },
    {
      "sub_name": "User2",
      "email": "user2@gmail.com",
      "contest_id": "115",
      "createdAt": 1569628118967,
      "phone": 97158231245454,
      "country": "kuwait",
      "gender": "male"
    }

  ]
}

Буду признателен за любую быструю помощь, не я хочу использовать HOC, поэтому нужно передавать те же данные вдругие компоненты, а также.

Answer 1

Карта не работает на объекте, она работает на массиве.Пожалуйста, сделайте

componentDidMount() {
    fetch('http://www.mocky.io/v2/5d8f41e63200004d00adebcd', {
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
   })
   .then((response) => response.json())
   .then(dashboarddata => this.setState({ dashboarddata: [dashboarddata] }));
}

В javascript, map является функцией массива.Если вы хотите распечатать результат, используйте индексацию для получения и печати данных

Answer 2

Прежде всего, пожалуйста, используйте «https» вместо «http» для URL.И попробуйте использовать код, упомянутый @Ashok.Он прав, что вы не можете перебирать объект с отображением, которое вы вводите в ответ на массив.

Answer 3

Попробуйте это ..

let data = this.state.dashboarddata;

for (var key in data) {
    if (data.hasOwnProperty(key)) {
        console.log(key); // key 
        console.log(data[key]); // value 
    }
}