반응 js 브라우저에서 적용된 필터를 유지하는 방법

Question

내 응용 프로그램에는 모든 목록 페이지에 필터가 있습니다. 요구 사항에 따라 브라우저의 뒤로 버튼에 적용된 필터를 유지하려고합니다. 예 : 사용자가 판매 목록 페이지에 필터를 적용했다고 가정 해 보겠습니다. 그 후 그는 한 레코드를 클릭하여 판매 편집 페이지로 이동합니다. 사용자가 브라우저의 뒤로 버튼을 누르면 적용된 필터가 남아 있어야합니다. 이렇게하려면 아래처럼했습니다. 잘 작동하지만 뒤로 버튼 동안은 LIS 페이지 API (this.loadList) twise를 호출하는 코드 위에 사용하여 판매 목록 페이지에서 ,

componentWillMount() { 
    const { list, checkReportClose, 
    updateReportCloseStatus } = this.props; 
    const { inPopState } = this.state; 
    window.onpopstate =() => { 
    if (!_.isEmpty(list)) { 
    this.setState({ filters: JSON.parse(list.input.filters), 
     inPopState: true}, this.loadList); 
    } 
    } 
    if(!inPopState && inPopState != undefined && 
    checkReportClose == false) { 
    this.loadList(); 
    } 
    } 

.

기존 솔루션에 새로운 해결책이나 수정 사항을 제안하십시오.

감사합니다.

Answer 1

url을 매개 변수로 필터를 저장하는 것이 좋습니다.

아래 예제를 작성했습니다. 아래 함수에 대한 URL로 http://skylerfenn.com/news?order=asc&category=feature&year=2017을 사용하겠습니다.

1 단계 : window.onpopstate에 getParameters()을 호출하고 매개 변수를 state에 저장하십시오. 위 URL을 사용하면 getParameters() 매개 변수가 객체 { order: 'asc', category: 'feature', year: '2017' }으로 반환됩니다.

function getParameters() { 
    let parameters = window.location.search.replace('?', ''); 

    let currentParameters = {}; 

    if (Object.keys(parameters).length) { 

    parameters = parameters.split('&'); 

    for (let i = 0; i < parameters.length; i++) { 
     let parameter = parameters[i].split('='); 
     currentParameters[parameter[0]] = parameter[1]; 
    } 

    } 

    return currentParameters; 
} 

2 단계 : 다음 객체로 getNewParameters 기능에 새로운 파라미터를 전달. 예를 들어 getNewParameters({ order: 'desc', year: null })을 호출하면 { order: 'desc', category: 'feature' } 개체가 반환됩니다. 널 (null)이기 때문에 연도가 제거됩니다.

function getNewParameters(newParameters) { 
    const parameters = getParameters(); 

    const keys = Object.keys(newParameters); 

    for (let i = 0; i < keys.length; i++) { 
    const value = newParameters[keys[i]]; 

    parameters[keys[i]] = value; 

    if (!value) { 
     delete parameters[keys[i]]; 
    } 
    } 

    return parameters; 
} 

3 단계 : getNewParameters의 결과를 사용하여 상태를 업데이트하십시오. 또한 아래 함수를 통해 결과를 전달하여 URL을 업데이트하십시오.

updateUrl(parameters) { 
    let search = ''; 
    let j = 0; 
    let separator = '?'; 

    Object.keys(parameters).forEach((key) => { 

    let value = parameters[key]; 

    if (value) { 

     if (j !== 0) { 
     separator = '&'; 
     } 

     search += `${separator}${key}=${value}`; 

     j++; 
    } 
    }); 

    let newUrl = `${location.origin}${location.pathname}${search}`; 

    // prevents pushing same url if function won't change url. 
    if (location.href !== newUrl) { 
    history.pushState(null, null, newUrl); 
    } 
} 

당신은 필터 값을 저장하는 로컬 스토리지를 사용할 수