React .map() 不是一个函数错误

Question

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>

        );
    }
}

我遇到了一个“this.state.weather.map不是函数”的错误。我正在从天气API获取数据。我成功地显示了API中的名称。 API调用本身也很正常，是成功的。 下面是在控制台中看到的API： 这是代码：

- jsPlayer

---

如果 this.state.weather 是JS对象，则它不会有 .map 方法。但是，如果它是一个 Immutable.Map，那么它就会有该方法。 - Suthan Bala

this.setState({ weather: this.state.weather.concat([{ ...res.data }]) }) - Rei Dien

我应该如何使用setState和concat来显示日期？像这样：const weathermap = this.state.weather.map((maps) => { {maps.wind.speed} - jsPlayer

Answer 1

您正在使用 this.state = { weather: []}; 实例化应用程序。但是，当您使用 this.setState({weather: res.data}) 时，您将覆盖this.state.weather为 JavaScript 对象，而不是数组，因此 .map 不再可用。

您可以通过简单地使用 const weathermap = this.state.weather.wind.speed 来实现您想要的内容。

- Suthan Bala

---

作为 React 的新手，在一开始我的上述陈述是这样的。但是，如果我执行 const weathermap = this.state.weather.wind.speed，则会抛出“Cannot read property 'speed' of undefined”的错误。当我直接将this.state.weather.wind.speed插入<small>WIND<small>中时，我会得到“对象不适用于React子元素（找到的键为{speed，deg，gust}的对象）。如果您想呈现子项集合，请改用数组，或使用React add-ons中的createFragment（object）包装对象。检查App的渲染方法。”的错误信息。 - jsPlayer

Answer 2

this.state.weather 是一个 JavaScript 对象，因此不支持使用 .map 方法。您可以使用

Object.Keys(YourObject).map() 

- Amir Tahani

Answer 3

你应该进行条件检查，然后使用.map方法，例如：

使用带有返回语法的.map方法。

const { weather } = this.state;
const weathermap = weather && weather.map(maps => {
      return <span>{maps.wind && maps.wind.speed}</span>
});

.map无返回语法

const { weather } = this.state;
const weathermap = weather && weather.map(maps => (
     <span>{maps.wind && maps.wind.speed}</span>
));

- Hemadri Dasari