इसलिए, मुझे पता है कि इसके बारे में बहुत सारे प्रश्न हैं और मैं लंबे समय से इसका समाधान खोज रहा हूं, लेकिन कुछ भी काम नहीं कर रहा है और मैं रिएक्टजेएस में लगभग एक नौसिखिया हूं ...

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

बेहतर व्याख्या करने के लिए:

App.js

import React from 'react';
import './App.css';
import {dataSet1, dataSet2} from './data/dataSet.js'
import Quiz from './Quiz.js'
import {BrowserRouter,Switch,Route, Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';


class App extends React.Component {
  render() {
    var style = {
      width: "25%",
      backgroundColor: "green",
      float: "center",
      padding: "12px 28px",
      textAlign: "center",
      color: "white",
    }

    return(
      <div>
        <BrowserRouter>
          <Button style={style} component={Link} to="/level1">Play</Button>
          <Switch>
            <Route exact path="/level1" component={withRouter(Quiz)}>
              <Quiz level={1} data={dataSet1}/>
            </Route>
            <Route path="/level2" component={withRouter(Quiz)}>
              <Quiz level={2} data={dataSet2}/>
            </Route>
          </Switch>  
        </BrowserRouter>
      </div>
    )
  }
}

export default App;

प्रश्नोत्तरी.जेएस

import React from 'react';
import {Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';

class Quiz extends React.Component {
    constructor(props) {
        super(props)

        this.state = {current:0, level: props.level, dataSet:props.data, correct:0, incorrect:0}
        this.handleClick = this.handleClick.bind(this)

    }

    handleClick(choice) {
        if (choice === this.state.dataSet[this.state.current].correct) {
          this.setState({correct: this.state.correct + 1})
        } else {
          this.setState({incorrect: this.state.incorrect + 1})
        }

        if (this.state.current === 4) { 
            if(this.state.correct + this.state.incorrect === 4){ 
                this.setState({current: this.state.current}) 
            }
            else {
                this.setState({current: 0})
                this.setState({incorrect: 0})
                this.setState({correct: 0})
            }
        } else {
             this.setState({current: this.state.current + 1}) 
        }
      }

      render() { 
        var style = {
            width: "25%",
            display: "block",
            backgroundColor: "green",
            textAlign: "center",
            color: "white"
          }
        if(this.state.current === 4 && this.state.correct === 5 ){
            var l = this.state.level + 1
            var next = '/level' + l
            return(
                <div>
                    <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                    <h3 align="left">Passaste de nível!</h3>
                    <Button style={style} component={Link} to={next}>
                        Next Level
                    </Button>
                </div>
            )
        } 
        else {
            return(
                <div>
                  <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                  <QuizArea handleClick={this.handleClick} dataSet={this.state.dataSet[this.state.current]} />
                </div>
              )
        }        
      }
}

....

export default withRouter(Quiz);

जब मैं "नेक्स्ट लेवल" पर क्लिक करता हूं तो मेरा यूआरएल http://localhost:3000/level2 में बदल जाता है। लेकिन पेज नहीं बदल रहा है। हालांकि, अगर मैं पृष्ठ को रीफ्रेश करता हूं, तो यह ठीक काम करता है और मेरा पृष्ठ जैसा होना चाहिए वैसा ही प्रस्तुत किया जाता है। इसके अलावा, अगर मैं अपने लेवल 2 रूट में होने पर "प्ले" पर क्लिक करता हूं, तो ऐसा ही होता है: यूआरएल http://localhost:3000/level1 लेकिन मेरा पेज मुझे लेवल2 दिखा रहा है।

फिर से शुरू:

मैं पेज को रीफ्रेश किए बिना लेवल 1 से लेवल 1 या लेवल 1 से लेवल 2 तक नहीं जा सकता।

अगर कोई मेरी मदद कर सकता है तो यह बहुत अच्छा होगा।

1
ines 8 अप्रैल 2020, 17:10

2 जवाब

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

अद्यतन करें:

मैं "href" के साथ एक बहुत ही सरल काम करके इसे ठीक करने में सक्षम था।

तो, मैंने इसे अपडेट किया:

<Button style={style} component={Link} to={next}>
  Next Level
</Button>

इसके लिए:

<Button href={next} style={style} >
  Next Level
</Button>

और अब यह ठीक काम कर रहा है!

0
ines 14 अप्रैल 2020, 21:28

यहां 2 मुद्दे हैं जिन पर आप भागे हैं।

पहला यह है कि आप प्रॉप्स को राज्य में डाल रहे हैं। यह आमतौर पर एक अच्छा अभ्यास नहीं है और इससे बचा जाना चाहिए, ताकि आपको इस तरह की समस्या न हो। इस मामले में props.level और props.data को राज्य में रखना पूरी तरह से अनुचित है, क्योंकि आप इसे बिल्कुल भी संशोधित नहीं कर रहे हैं)।

दूसरा है रिएक्ट राउटर का बुद्धिमान होना और अपने कंपोनेंट को रिमाउंट न करना चुनना। आपने अपने Route घटकों के लिए एक key प्रोप निर्दिष्ट नहीं किया, जो दर्शाता है कि अंदर के Quiz घटक एक ही चीज़ हैं, इस प्रकार केवल प्रॉप्स को बदला जाना चाहिए।

शुक्र है कि हमें केवल पहले वाले को ही हल करना होगा, क्योंकि तब घटक को रिमाउंट करने की आवश्यकता नहीं होगी, क्योंकि ऐसा कोई राज्य नहीं होगा जिसे बदलने की आवश्यकता होगी।

यहाँ समाधान है: प्रश्नोत्तरी.जेएस

import React from 'react';
import {Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';

class Quiz extends React.Component {
    constructor(props) {
        super(props)

        this.state = {current:0, correct:0, incorrect:0} //removed the unnecessary state 
        this.handleClick = this.handleClick.bind(this)

    }

    handleClick(choice) {
        if (choice === this.props.data[this.state.current].correct) {
          this.setState({correct: this.state.correct + 1})
        } else {
          this.setState({incorrect: this.state.incorrect + 1})
        }

        if (this.state.current === 4) { 
            if(this.state.correct + this.state.incorrect === 4){ 
                this.setState({current: this.state.current}) 
            }
            else {
                this.setState({current: 0})
                this.setState({incorrect: 0})
                this.setState({correct: 0})
            }
        } else {
             this.setState({current: this.state.current + 1}) 
        }
      }

      render() { 
        var style = {
            width: "25%",
            display: "block",
            backgroundColor: "green",
            textAlign: "center",
            color: "white"
          }
        if(this.state.current === 4 && this.state.correct === 5 ){
            var l = this.props.level + 1
            var next = '/level' + l
            return(
                <div>
                    <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                    <h3 align="left">Passaste de nível!</h3>
                    <Button style={style} component={Link} to={next}>
                        Next Level
                    </Button>
                </div>
            )
        } 
        else {
            return(
                <div>
                  <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                  <QuizArea handleClick={this.handleClick} dataSet={this.props.data[this.state.current]} />
                </div>
              )
        }        
      }
}

....

export default withRouter(Quiz);

(बस सभी this.state.level को this.props.level से और सभी this.state.dataSet को this.props.data से बदल दें)

उम्मीद है ये मदद करेगा!

0
Adam Jeliński 8 अप्रैल 2020, 21:45