在 React Native 中作为对象返回的数组 = 无法引用数组项?
Array returning as an Object in React Native = can't reference an array item?
我正在使用 React Native 和 Open Weather Map API 构建一个小型天气应用程序。我从 API 调用中检索到的数据比我想使用的要多,所以我只解析出我需要的部分并将它们存储在一个数组中。然后我获取数组并将其设置为状态对象。我可以引用该对象,但它没有说我的数组是一个数组,而是说它是一个对象,因此不允许我在其上使用任何数组方法。我该如何解决这个问题?
//reponseData is the data retrieved from the API call; the data retrieved is an object with arrays and objects
within. The forecast data for the next five days is given in 3 hour increments, so you have a 40 item array of
data pieces. I loop through this list of 40 items, pull out just what I need...
let forecastArray = [];
for (let i=0; i<responseData.list.length; i++) {
let day = responseData.list[i].date
let high = responseData.list[i].weather[0].hiTemp
let low = responseData.list[i].weather[0].loTemp
let condition = responseData.list[i].sys.condition
forecastArray.push(day)
forecastArray.push(high)
forecastArray.push(low)
forecastArray.push(condition)
this.setState({
forecastData: forecastArray
})
当我登录时,我得到一个数组....
console.warn("forecast is: ", this.state.forecastData)
OUTPUTS: forecast is: ["11-06-2019", 52.5, 47.3, "sunny", "11-06-2019", 63.9, 39.7, "sunny", ...]
引用 this.state.forecastData[2],例如,但是给我错误。所以我检查了 typeof this.state.forecast 看看为什么,它说数组是一个对象?我需要进一步划分数组数据并对其进行操作。前几项 (e.x.forecastData[0] 到 forecastData[9] 将用于 11-06-2019 下午 3 点、下午 6 点、晚上 9 点的天气预报,所以我需要提取这些项目,获得最高的最高价和最低价等。我不能那样做,因为我什至不能引用数组中的项目。
我尝试过的事情:
使用 Object.entries 和 Object.assign 方法,但这只是将项目分成几个数组,第一个项目是位置编号,第二个项目是数组项目内容。我已经尝试在使用它的组件中操作数组,但它仍然是一个对象而不是数组,所以我无法引用单个项目。数据集足够大,我认为将 40 多个项目中的每一个都推送到它们自己的状态对象键中不是最佳做法。
in Javascript array 是 object 的子集,即它具有相同的原型。所以 typeof Array 将是一个对象。那不是问题。你能更新你在访问 this.state.forecastData[2]
时遇到的错误吗,因为我。相信它不是语法,而是 API 调用的持续时间。
我建议在访问 this.state.forecastData[2] 时首先检查它的长度是否大于 0 ,这样你就可以确定数组中有数据。
constructor(props){
forecastData:[]
}
当你使用它时,
if(this.state.forecastData.length > 0){
this.state.forecastData[2]
}
试试这个,带着疑问回复
谢谢您,Gaurav Roy!你部分正确。 typeof 根本不重要。但问题不在于我的 API 的持续时间,而是我的组件在还没有来自 API 调用的数据时试图呈现!我输入了条件
{this.state.forecast !== null && <Forecast forecast=this.state.forecastData />}
现在一切正常。感谢您的快速回复!
我正在使用 React Native 和 Open Weather Map API 构建一个小型天气应用程序。我从 API 调用中检索到的数据比我想使用的要多,所以我只解析出我需要的部分并将它们存储在一个数组中。然后我获取数组并将其设置为状态对象。我可以引用该对象,但它没有说我的数组是一个数组,而是说它是一个对象,因此不允许我在其上使用任何数组方法。我该如何解决这个问题?
//reponseData is the data retrieved from the API call; the data retrieved is an object with arrays and objects
within. The forecast data for the next five days is given in 3 hour increments, so you have a 40 item array of
data pieces. I loop through this list of 40 items, pull out just what I need...
let forecastArray = [];
for (let i=0; i<responseData.list.length; i++) {
let day = responseData.list[i].date
let high = responseData.list[i].weather[0].hiTemp
let low = responseData.list[i].weather[0].loTemp
let condition = responseData.list[i].sys.condition
forecastArray.push(day)
forecastArray.push(high)
forecastArray.push(low)
forecastArray.push(condition)
this.setState({
forecastData: forecastArray
})
当我登录时,我得到一个数组....
console.warn("forecast is: ", this.state.forecastData)
OUTPUTS: forecast is: ["11-06-2019", 52.5, 47.3, "sunny", "11-06-2019", 63.9, 39.7, "sunny", ...]
引用 this.state.forecastData[2],例如,但是给我错误。所以我检查了 typeof this.state.forecast 看看为什么,它说数组是一个对象?我需要进一步划分数组数据并对其进行操作。前几项 (e.x.forecastData[0] 到 forecastData[9] 将用于 11-06-2019 下午 3 点、下午 6 点、晚上 9 点的天气预报,所以我需要提取这些项目,获得最高的最高价和最低价等。我不能那样做,因为我什至不能引用数组中的项目。
我尝试过的事情: 使用 Object.entries 和 Object.assign 方法,但这只是将项目分成几个数组,第一个项目是位置编号,第二个项目是数组项目内容。我已经尝试在使用它的组件中操作数组,但它仍然是一个对象而不是数组,所以我无法引用单个项目。数据集足够大,我认为将 40 多个项目中的每一个都推送到它们自己的状态对象键中不是最佳做法。
in Javascript array 是 object 的子集,即它具有相同的原型。所以 typeof Array 将是一个对象。那不是问题。你能更新你在访问 this.state.forecastData[2]
时遇到的错误吗,因为我。相信它不是语法,而是 API 调用的持续时间。
我建议在访问 this.state.forecastData[2] 时首先检查它的长度是否大于 0 ,这样你就可以确定数组中有数据。
constructor(props){
forecastData:[]
}
当你使用它时,
if(this.state.forecastData.length > 0){
this.state.forecastData[2]
}
试试这个,带着疑问回复
谢谢您,Gaurav Roy!你部分正确。 typeof 根本不重要。但问题不在于我的 API 的持续时间,而是我的组件在还没有来自 API 调用的数据时试图呈现!我输入了条件
{this.state.forecast !== null && <Forecast forecast=this.state.forecastData />}
现在一切正常。感谢您的快速回复!