[英]react.js , JS: Getting access to nested object property through function parameter
I am in progress of doing weather app , and i am calling API to send me back weather data so i am reciving back an JSON , it looks somehow like that: 我正在进行天气应用程序的开发,正在调用API向我发送天气数据,因此我正在接收JSON,它看起来像这样:
{
someprops: someval,
.... ,
list: [
0: {
main:{someprops},
wind:{someprops},
...
},
1: {propsAsAbove},
...
]
}
so , i have a table where in every row i have to do same map method on the list from api and it looks as beneath: 因此,我有一个表,在每一行中,我必须对api列表中的表执行相同的map方法,如下所示:
<tr>
<td>hour </td>
{weatherInfo.list.map((item,idx) => {
while(idx < displayItemTo && idx >= displayItemFrom){
return(
<td>{weatherInfo.list[idx].dt_txt.slice(11,19)}</td>
)
}
})}
</tr>
<tr>
<td>temp</td>
{weatherInfo.list.map((item,idx) => {
while(idx < displayItemTo && idx >= displayItemFrom){
return(
<td>{Math.round(weatherInfo.list[idx].main.temp - 273.85)} ℃ </td>
)
}
})}
</tr>
<tr>
<td>humidity</td>
{weatherInfo.list.map((item,idx) => {
while(idx < displayItemTo && idx >= displayItemFrom){
return(
<td>{weatherInfo.list[idx].main.humidity} % </td>
)
}
})}
</tr>
and there is few more rows a lot of repetition as you can see , so i thought of making this code shorter and simpler , than come up with idea of using this kind of function for that: 而且,您可以看到几乎没有更多的重复行,所以我想到了使这段代码更短,更简单,而不是想到为此使用这种功能:
mapList(param){
return () => {
const weatherInfo = this.props.forecastData,
{displayItemTo,displayItemFrom} = this.state;
console.log('hello' + a);
weatherInfo.list.map((item,idx) =>{
while(idx < displayItemTo && idx >= displayItemFrom){
return(
<td key={idx}>weatherInfo.param</td>
)
}
});
}
}
and here i found issue , how to call the function or change it so after i gave a parameter it will go through the tree to prop i need , thought of using spread operator from ES6 , but dont have a clue how should i implement it. 在这里我发现了问题,如何调用函数或对其进行更改,因此在给定参数后它将通过树来满足我的需要,考虑使用ES6中的散布运算符,但不知道如何实现它。
Provide a function that will get the desired property from the object: 提供一个将从对象获取所需属性的函数:
displayInfo(getter) {
const weatherInfo = this.props.forecastData;
const { displayItemTo, displayItemFrom } = this.state;
return weatherInfo.list
.filter((item, idx) => idx < displayItemTo && idx >= displayItemFrom)
.map((item, idx) => (
<td key={idx}>{getter(weatherInfo)}</td>
));
}
// use case
<tr>
<td>humidity</td>
{ displayInfo(info => info.main.humidity) }
</tr>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.