在react js中循环本地存储数据并形成API url参数

时间:2020-06-22 11:01:52

标签: javascript arrays reactjs ecmascript-6 local-storage

我在React中有一个以下函数,用于根据localstorage中存在的内容获取用于形成api url的密钥,该函数虽然完美,但我想对其进行优化,并使用map函数而不是重复函数。

getFiltersFromLocal() {

let formurl = (localStorage.getItem(videoUrl) ? '&' + 'videoUrl=' + localStorage.getItem(videoUrl) : '') 
            
+ (localStorage.getItem(tvenName) ? '&' + 'enName=' + localStorage.getItem(tvenName) : '') 
            
+ (localStorage.getItem(tvGender) ? '&' + 'tvGender=' + (localStorage.getItem(tvGender)) : '')
            
+ (localStorage.getItem(tvStatus) ? '&' + 'tvStatus=' + (localStorage.getItem(tvStatus)) : '')

return formurl

}

为了优化这一点,我尝试了以下方法,但没有成功。

getFiltersFromLocal() {
const localfilterdata = {
            "data": [
              {
                "keysToCheck": [videoUrl,tvenName,tvGender,tvStatus,tvidFrom,tvidTo,tvsortorderFrom,tvsortorderTo,tvstartFrom,tvstartTo,tvendFrom,tvendTo,tvsearch]
              },
              {
                "apiparams": ["videoUrl=","enName=","tvGender=","tvStatus=","idFrom=","idTo=","sortOrderFrom=","sortOrderTo=","startDateFrom=","startDateTo=","endDateFrom=","endDateTo=","search="],
              }
            ]
        }
    localfilterdata.data.map(k => {
            let formurl = localStorage.getItem(k.keysToCheck) ? '&' + k.apiparams + localStorage.getItem(k.keysToCheck) : ''
            return formurl
        })
}

注意:此函数将根据localstorage中的项目形成url,并将其附加到url上。下面的示例网址

https://example.com/getTvList?size=20&page=1&tvStatus=INACTIVE&enName="sample"

使用如下功能:

url = FETCH_URL +'?size ='+ stateData.pageSize +'&page ='+ stateData.currentPage + this.getFiltersFromLocal()

1 个答案:

答案 0 :(得分:0)

嘿,我只是假设您尝试过做类似的事情,


const localfilterdata = {
    "keysToCheck": ['videoUrl','tvenName','tvGender','tvStatus','tvidFrom','tvidTo','tvsortorderFrom','tvsortorderTo','tvstartFrom','tvstartTo','tvendFrom','tvendTo','tvsearch'],
    "apiparams": ["videoUrl=","enName=","tvGender=","tvStatus=","idFrom=","idTo=","sortOrderFrom=","sortOrderTo=","startDateFrom=","startDateTo=","endDateFrom=","endDateTo=","search="]
}
localfilterdata.keysToCheck.map((k,index) => {
    let formurl = localStorage.getItem(k) ? '&' + localfilterdata.apiparams[index] + localStorage.getItem(k) : ''
    return formurl
}).join('')