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

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);

这只是返回一个空数组。

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

我也试过:

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");
});