Question

我正在使用React构建一个使用OpenWeatherAPI Forecast By Hour返回天气的应用。

我成功地从OWA中提取了数据，并使用以下代码将其放入了state中：

state = {
        loadedPageForecasts: []
    } 

componentDidMount () {
    //console.log(this.props);

    if (this.props.match.params.id) {
        axios.get('http://api.openweathermap.org/data/2.5/forecast?q=London,uk&appid=MYAPIKEY')
        .then(response => {
            //const forecastData = response.data.list.;
            this.setState({loadedPageForecasts: response.data.list});
        });
    }    

}

console.log(loadedPageForecasts)返回一个数组，其中包含我需要的所有数据，所以我在那很好。

现在，我需要根据这个日期从这个数组中过滤出并进入一个新数组。为简化起见，我只是手动选择了一个日期。

我使用以下代码：

const paramsid = this.state.loadedPageForecasts;
        console.log(paramsid);

        let result = paramsid.filter(obj => {
            return obj.type.includes("2018-06-28");
        });

        console.log(result);

这将返回未定义。所以我尝试如下：

const paramsid = this.state.loadedPageForecasts;
        console.log(paramsid);

        let result = paramsid.filter(obj => {
            return paramsid.includes("2018-06-28");
        });

        console.log(result);

这只会返回一个空数组。

我认为我称对象为错误，但是我认为“ includes”会为此扫描数组中的所有对象。

我也尝试过：

let result = paramsid.filter(obj => {
            return this.state.dt_txt.includes("2018-06-28");
        });

和

let result = paramsid.filter(obj => {
            return this.props.dt_txt.includes("2018-06-28");
        });

根据我执行console.log(paramsid)

时的以下屏幕截图

我还是React的新手，我正在尝试尽可能多的练习。任何帮助表示赞赏！

Answer 1

您要检查obj是否具有dt_txt，其中包含给filter赋予的功能中要查找的日期：

let result = paramsid.filter(obj => {
  return obj.dt_txt.includes("2018-06-28");
});

Answer 2

执行此操作：

setState

此外，请确保在setState callback成功之后（在white-space: nowrap中）调用此方法。确保您以异步方式执行以下操作。

在React中，根据数组中对象的值返回状态为数组

2 个答案: