प्रतिक्रिया

Question

के साथ बैक बटन पर राज्य को कैसे पुनर्प्राप्त करें यदि मेरे पास एक साधारण प्रतिक्रिया घटक है जो बटन के लिए क्लिक गिनती रिकॉर्ड करता है और प्रत्येक क्लिक पर यूआरएल को बदले बिना एक नया इतिहास स्थिति रिकॉर्ड करता है। जब उपयोगकर्ता वापस क्लिक करता है तो मैं राज्य को कैसे पुनर्स्थापित कर सकता हूं?

मैं मूल जावास्क्रिप्ट इतिहास ऑब्जेक्ट का उपयोग कर यहां कर सकता हूं, लेकिन यह तब विफल हो जाता है जब उपयोगकर्ता पहले राज्य में वापस आ जाता है और एक अलग घटक से वापस इस स्थिति में बदल जाता है।

मुझे संदेह है कि प्रतिक्रिया-राउटर (1.0) का उपयोग करके ऐसा करने के लिए बेहतर है?

import React, { Component } from 'react'; 

export default class Foo extends Component { 
    state = { 
    clickCount: 0, 
    }; 

    componentWillMount() { 
    window.onpopstate = (event) => { 
     if (event.state.clickCount) { 
     this.setState({ clickCount: event.state.clickCount }); 
     } 
    }; 
    } 

    onClick() { 
    const newClickCount = this.state.clickCount + 1; 
    const newState = { clickCount: newClickCount }; 
    this.setState(newState); 
    history.pushState(newState, ''); 
    } 

    render() { 

    return (
     <div> 
     <button onClick={this.onClick.bind(this)}>Click me</button> 
     <div>Clicked {this.state.clickCount} times</div> 
     </div> 
    ); 
    } 
} 

Answer 1

स्थानीय स्टोरेज या यहां तक ​​कि कुकीज़ विकल्प हैं, लेकिन शायद सबसे अच्छा तरीका नहीं है। आपको गिनती को डेटाबेस में संग्रहीत करना चाहिए, इस प्रकार आप डेटाबेस में सहेजे गए अंतिम मूल्य पर अपने कन्स्ट्रक्टर में प्रारंभिक स्थिति सेट कर सकते हैं।

एक और विकल्प, यदि आपको केवल क्लाइंट पक्ष (और डेटाबेस में नहीं) पर गिनती जारी रखने की आवश्यकता है तो एक बंद करने का उपयोग कर रहा है।

// CountStore.js 
var CountStore = (function() { 
    var count = 0; 

    var incrementCount = function() { 
    count += 1; 
    return count; 
    }; 

    var getCount = function() { 
    return count; 
    }; 

    return { 
    incrementCount: incrementCount, 
    getCount: getCount 
    } 

})(); 

export default CountStore; 

तो आपका कोड नीचे में बदल जाएगा।

import React, { Component } from 'react'; 
import CountStore from './CountStore'; 

export default class Foo extends Component { 
    state = { 
    clickCount: CountStore.getCount() 
    }; 

    componentWillMount() { 
    window.onpopstate = (event) => { 
     if (event.state.clickCount) { 
     this.setState({ clickCount: event.state.clickCount }); 
     } 
    }; 
    } 

    onClick() { 
    const newClickCount = CountStore.incrementCount(); 
    const newState = { clickCount: newClickCount }; 
    this.setState(newState); 
    } 

    render() { 

    return (
     <div> 
     <button onClick={this.onClick.bind(this)}>Click me</button> 
     <div>Clicked {this.state.clickCount} times</div> 
     </div> 
    ); 
    } 
} 

प्रतिक्रिया-राउटर का उपयोग करके एक क्लीनर तरीका हो सकता है, लेकिन यह एक विकल्प है।