时间戳

首页 > 解决方案 > 在 React 中，根据数组中对象的值将状态作为数组返回

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

问题描述

我正在使用 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);

这只是返回一个空数组。

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

我也试过：

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 还是很陌生，我正在尝试尽可能多地练习。任何帮助表示赞赏！

标签： javascriptarraysreactjs

解决方案

你想检查是否obj有一个dt_txt包含你在给定的函数中寻找的日期filter：

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

推荐阅读