मैं प्रतिक्रिया करने के लिए नया हूं और एक ऐप बना रहा हूं जो दो एपीआई में से एक से जुड़ सकता है। ये एपीआई प्रत्येक "प्राधिकरण कोड" प्रवाह का उपयोग करते हैं, जो उपयोगकर्ता को एक पहचान सर्वर पर रीडायरेक्ट करता है, उपयोगकर्ता पहचान सर्वर में लॉग इन करता है और मेरे प्रतिक्रिया ऐप को डेटाबेस में संग्रहीत अपने डेटा तक पहुंचने की अनुमति देता है, और उपयोगकर्ता को फिर मेरे पास रीडायरेक्ट किया जाता है अनुप्रयोग।

तो मेरे ऐप में 2 बटन, बटन 1 और बटन 2 वाला होम पेज है। मैं होम पेज स्थिति का उपयोग इस मूल्य को स्टोर करने के लिए कर रहा हूं कि किस बटन पर क्लिक किया गया था और उपयोगकर्ता किस एपीआई का उपयोग करना चाहता है - उदाहरण: यदि बटन 1 क्लिक किया गया था: this.setState({page1: true, page2: false})

फिर उपयोगकर्ता को पहचान सर्वर पर पुनर्निर्देशित किया जाता है: window.location = "https://identityserverurl"

उपयोगकर्ता पहचान सर्वर वेबसाइट पर लॉग इन करता है, "अनुमति दें" पर क्लिक करता है और फिर मेरे ऐप पर वापस भेज दिया जाता है। फिर क्या होना चाहिए पहचान सर्वर पर रीडायरेक्ट से ठीक पहले राज्य सेट पर आधारित है, होम पेज के बजाय एक अलग घटक प्रदर्शित होता है - (उसके लिए एक सशर्त बयान का उपयोग कर रहा हूं)।

समस्या यह है कि जब उपयोगकर्ता को एपीआई पहचान सर्वर से मेरे ऐप पर वापस रीडायरेक्ट किया जाता है, तो यह अन्य पेजों में से एक के बजाय होम पेज लोड करता है क्योंकि पहचान सर्वर उपयोगकर्ता को मेरे पास रीडायरेक्ट करते समय राज्य को उसके प्रारंभिक मान पर रीसेट किया जा रहा है। अनुप्रयोग।

जब पहचान सर्वर मेरे ऐप पर वापस रीडायरेक्ट करता है तो मुझे राज्य को प्रारंभिक मूल्य पर रीसेट करने से रोकने के लिए एक तरीका खोजने की आवश्यकता होती है। मुझे यकीन नहीं है कि इसे कैसे संभालना है।

Dan ternyata file pengujian saya memiliki masalah di blok {} statis yang mencegah .includeAllPackagesUnderHere() berjalan dengan sukses.

Main.js

import React, { Component } from 'react';
import Home from './Home.js';
import Page1 from './Page1.js';
import Page2 from './Page2.js'

class Main extends Component {
    constructor(props) {
      super(props);
      this.state = {page1: false, page2: false};
      this.handleClick = this.handleClick.bind(this);
    }

    hanldeRedirect() {
      window.location = "https://identityserverurl.com";
    }

    handleClick(arg) {
      if(arg === "page1") {
        this.setState({page1: true, page2: false});
        this.hanldeRedirect();
      }
      if(arg === "page2") {
        this.setState({page1: false, page2: true});
        this.hanldeRedirect();
      }
      if(arg === "home"){
        this.setState({page1: false, page2: false})
      }
    }

    render() {
      const isPage1 = this.state.page1;
      const isPage2 = this.state.page2;
      if(!isPage1 && !isPage2) {
        return(<Home onPage1Event={() => this.handleClick("page1")} page1Value="page1" onPage2Event={() => this.handleClick("page2")} page2Value="page2" />)
      }
      else {
        if(isPage1) {
          return(<Page1 />)
        }
        else {
          return(<Page2 />)
        }
      }
    }
  }

  export default Main;

होम.जेएस

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

class Home extends Component {
    render() {
      return(
        <div>
          <Button onEvent={(event)=> this.props.onPage1Event(event)} btnValue={this.props.page1Value}>{this.props.page1Value}</Button>
          <br/>
          <Button onEvent={(event)=> this.props.onPage2Event(event)} btnValue={this.props.page2Value}>{this.props.page2Value}</Button>
        </div>
      )
    }
  }

  export default Home;

पेज1.जेएस

import React from 'react';

const Page1 = () => {
    return(
        <div>
            <h1>Page1</h1>
        </div>
    )
}

export default Page1;

पेज2.जेएस

import React from 'react';

const Page2 = () => {
    return(
        <div>
            <h1>Page2</h1>
        </div>
    )
}

export default Page2;

Button.js

import React, { Component } from 'react';

class Button extends Component {
    render() {
      return(
        <button onClick={() => this.props.onEvent()} value={this.props.btnValue}>{this.props.btnValue}</button>
      )
    }
  }

  export default Button
2
abcedefg 7 सितंबर 2019, 05:44

1 उत्तर

सबसे बढ़िया उत्तर

ब्राउज़र स्थानीय भंडारण का उपयोग करें जो लगातार भंडारण दे सकता है, क्योंकि आपका प्रतिक्रिया ऐप प्रत्येक पुनर्निर्देशन को पुनः लोड करता है, स्थानीय में संग्रहीत मूल्य को राज्य मूल्य के रूप में उपयोग करें।

अधिक जानकारी के लिए: https://www.robinwieruch.de/local-storage-react

1
Ajay Ghosh 7 सितंबर 2019, 06:56