Question

我正在进行天气应用程序，我正在调用API向我发回天气数据，所以我回收了一个JSON，它看起来有点像：

{
 someprops: someval,
 .... ,
 list: [
   0: {
     main:{someprops},
     wind:{someprops},
     ...
   },
   1: {propsAsAbove},
    ...
   ]
 }

所以，我有一个表格，在每一行中，我必须在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)} &#8451; </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>

并且你可以看到更多的行重复，所以我想让这段代码更短更简单，而不是想出使用这种函数的想法：

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

在这里我发现了问题，如何调用该函数或更改它所以在我给出一个参数之后它将通过树来支持我需要，想到使用来自ES6的扩展运算符，但是没有线索我应该怎么做实现它。

Answer 1

提供一个从对象中获取所需属性的函数：

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>

react.js，JS：通过函数参数

1 个答案: