Map is not a function react ошибка

import React, {Component} from 'react';
import './App.css';
import axios from 'axios';

export default class App extends Component {

    constructor() {
        super();
        this.state = {
            weather: []
        };
    }
componentDidMount (){

  this.search();
}
    search = () => {

        axios.get("http://api.openweathermap.org/data/2.5/weather?q=Houston&APPID=f2327cca8f3d665f4c9f73b615b294ed")
        .then(res => {

            this.setState({weather: res.data});

        }).catch(error => {
            console.log('Error from fetching data', error);
        })
    }

    render() {
    console.log(this.state.weather);
    const weathermap = this.state.weather.map( (maps) =>{
      {maps.wind.speed}
});

        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-4 col-md-offset-4">
                        <div className="weather">
                            <div className="current">
                                <div className="info">
                                    <div>&nbsp;</div>
                                    <div className="city">
                                        <small>
                                            <small>CITY:</small>
                                        </small>
                                        {this.state.weather.name}</div>
                                    <div className="temp">67&deg;
                                        <small>F</small>
                                    </div>
                                    <div className="wind">
                                        <small>
                                            <small>WIND:{weathermap}</small>
                                        </small>

                                        </div>
                                    <div>&nbsp;</div>
                                </div>
                                <div className="icon">
                                    <span className="wi-day-sunny"></span>
                                </div>
                            </div>
                            <div className="future">
                                <div className="day">
                                    <h3>Mon</h3>
                                    <p>
                                        <span className="wi-day-cloudy"></span>
                                    </p>
                                </div>
                                <div className="day">
                                    <h3>Tue</h3>
                                    <p>
                                        <span className="wi-showers"></span>
                                    </p>
                                </div>
                                <div className="day">
                                    <h3>Wed</h3>
                                    <p>
                                        <span className="wi-rain"></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        );
    }
}

You are instantiating the app by saying this.state = { weather: []};. However, When you say this.setState({weather: res.data}), you are overriding the this.state.weather to a JavaScript object rather than array, thus the .map is not available anymore.

You can achieve what you’re trying to do by simply const weathermap = this.state.weather.wind.speed

answered Mar 24, 2017 at 1:18

Amir TahaniAmir Tahani

6685 silver badges13 bronze badges

Hemadri DasariHemadri Dasari

31.4k34 gold badges115 silver badges157 bronze badges

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import LoginForm from './LoginForm';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: {},
      isLoaded: false,
    }
  }
  componentDidMount() {
    fetch(' http://127.0.0.1:8000/api/roles')
      .then(res => {return res.json();})
      .then(json => {
        this.setState({
          isLoaded: true,
          items: json,    })
      });
  }
  render() {

  const { isLoaded, items } = this.state;
    if (!isLoaded) {
      return <div>Loading...</div>
    }
    else {
      return (
        <div >
         <ul>
           {items.map( item => 
             <li key={item.id}>{item.name}</li>
           )}
         </ul>
      </div>
      )
    }
  }
}
export default App

This code doesn’t appear to use Redux at all. I would suggest StackOverflow or a React tutorial for general React questions/debugging like this.

You can’t iterate over an object, as you set items: {}. Object.map() will throw you an error ‘map is not a function’

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import LoginForm from './LoginForm';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false,
    }
  }
  componentDidMount() {
    fetch(' http://127.0.0.1:8000/api/roles')
      .then(res =>   res.json())
      .then(json => {
        console.log(this.state.items)
        this.setState({
          isLoaded: true,
          items: json
        });
  })}
  render() {
    var { items = [] } = this.props;
    var { isLoaded } = this.state;
    if (!isLoaded) {
      return <div>Loading...</div>
    }
    else {
      return (
        <div >
         <ul>
           {items.map( item => (
             <li key={item.id}> Name : {item.name}</li>
           ))}
         </ul>
      </div>
      )
    }
  }
}
export default App

Now I changed it to items: [] but i got any resuls : the error was gone but i didn’t see anything in the screen

This has nothing to do with Redux.

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import LoginForm from './LoginForm';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: {},
      isLoaded: false,
    }
  }
  componentDidMount() {
    fetch(' http://127.0.0.1:8000/api/roles')
      .then(res => {return res.json();})
      .then(json => {
        this.setState({
          isLoaded: true,
          items: json,    })
      });
  }
  render() {

  const { isLoaded, items } = this.state;
    if (!isLoaded) {
      return <div>Loading...</div>
    }
    else {
      return (
        <div >
         <ul>
           {items.map( item => 
             <li key={item.id}>{item.name}</li>
           )}
         </ul>
      </div>
      )
    }
  }
}
export default App

I got this problem when i try to fetch data from an api to react . any help plz?

you can try React.Children.map .https://reactjs.org/docs/react-api.html#reactchildrenmap