यहाँ मेरा कोड है

मैं प्रगति पर एक स्पिनर चला रहा हूँ।

जब यह किया जाता है, तो यह "सफलता" संदेश दिखाता है।

मैंने होम और StatusInfoIcon (स्पिनर) के लिए घटक बनाया।

"सफलता" संदेश के बाद मैं StatusInfoIcon घटक को कैसे रिमाउंट कर सकता हूं? मैं अलग आईडी के लिए कार्रवाई चलाने के लिए चाहता हूँ

Math.Random() से मूल्य के साथ प्रॉप्स के माध्यम से चाइल्डकी जैसे गुणों को पारित करने का प्रयास किया, लेकिन यह घटक राज्य को रीसेट नहीं करता था, इसलिए यह "सफलता" संदेश पर अटक गया था।

घरेलू घटक:

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { withOktaAuth } from '@okta/okta-react';

import SearchBar from "../SearchBar"
import StatusIcon from "../StatusIconInfo"

import APIClient from '../apiClient'

const styles = theme => ({
  root: {
    flexGrow: 1,
    marginTop: 30
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
});

class Home extends React.Component {
  state = {
    showstatus: false
  };

  async componentDidMount() {
    const accessToken = await this.props.authService.getAccessToken()
    this.apiClient = new APIClient(accessToken);
  }



  removeUser = async (id) => {
    const uuid = await this.apiClient.removeUser(id); 
    console.log(uuid);
    this.setState({uuid: uuid});
  }
  
  onSearch = (event) => {
    const target = event.target;
    if (!target.value || target.length < 3) { return }
    if (event.which !== 13) { return }

   this.removeUser(target.value);
   this.setState({showstatus: true});
    
  }


  render() {
    const uuid = this.state.uuid;     
    return (
      <div className={styles.root}>
        <SearchBar onSearch={this.onSearch} />
    {this.state.showstatus?
    <StatusIcon uuid={uuid}>
    </StatusIcon>
        :
          <div></div>
    }
      </div>
    );
  }
}

export default withStyles(styles)(withOktaAuth(Home));

StatusInfoIcon घटक

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { withOktaAuth } from '@okta/okta-react';
import { CircularProgress } from '@material-ui/core';
import Fade from '@material-ui/core/Fade';
import Typography from '@material-ui/core/Typography';
import APIClient from '../apiClient'

const styles = theme => ({
  root: {
    flexGrow: 1,
    marginTop: 30
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
  placeholder: {
    height: 40,
  },
});


class StatusIcon extends React.Component {
  constructor(props) {
    
    super(props);
    this.logout = this.logout.bind(this);
    this.state = {
      uuid: this.props.uuid,
      status: "progress"
    }
  }

  async logout(e) {
    e.preventDefault();
    this.props.authService.logout('/');
  }

  async componentDidMount() {
    console.log(this.state.uuid)
    const accessToken = await this.props.authService.getAccessToken()
    this.apiClient = new APIClient(accessToken);
    this.intervalId = setInterval(() => this.loadData(this.props.uuid), 1000);
    this.loadData(this.props.uuid); // also load one immediately
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  

  loadData = async (uuid) => {
    const taskstatus = await this.apiClient.checkStatus(uuid);
    console.log(taskstatus);
    this.setState({status: taskstatus});
    if(taskstatus === 'success')
      clearInterval(this.intervalId);

  }

  render() {
    const classes = withStyles();

    return (
      <div>
      <div className={classes.placeholder}>
        {this.state.status === 'success' ?
    (
          <Typography>Success!</Typography>
                
        ) : (
          <Fade
            in={this.state.status === 'progress'}
            style={{
              transitionDelay: this.state.status === 'progress' ? '800ms' : '0ms',
            }}
            unmountOnExit
          >
            <CircularProgress />
          </Fade>
        )}
      </div>
      </div>
    )
  }
}

export default withStyles(styles)(withOktaAuth(StatusIcon));

सुना है कि सेटइंटरवल के बावजूद मैं useEffect() का उपयोग कर सकता हूं, लेकिन मुझे नहीं पता कि इसे अपने कोड में कैसे उपयोग किया जाए।

1
dev 2 जिंदा 2021, 17:51
प्रतिक्रिया घटक जब भी राज्य का मान बदल जाता है, तो उसे फिर से प्रस्तुत किया जाएगा। या इसके मूल घटक को फिर से प्रस्तुत किया गया है। क्या आप सुनिश्चित हैं, राज्य मूल्य सही ढंग से अपडेट हो रहे हैं?
 – 
Anand Raj
2 जिंदा 2021, 18:05
यह मुझे ReactJS के बारे में नहीं पता है। मैं अपना मतदान रोक देता हूं, इसलिए राज्य "सफल" स्थिति में रहेगा। मैं अब अपना घटक कैसे हटा सकता हूं? मैंने सोचा था कि मूल घटक नया बाल घटक (स्पिनर) बनाएगा और एक नई स्थिति होगी, लेकिन ऐसा लगता है कि इसमें पुरानी "सफलता" स्थिति है (सफलता संदेश प्रदर्शित किया जा रहा है)
 – 
dev
2 जिंदा 2021, 18:08
या यह नहीं किया जा सकता है और मेरा दृष्टिकोण गलत/विरोधी पैटर्न है :)
 – 
dev
2 जिंदा 2021, 18:09
UseEffect हुक के बारे में पढ़ें ... लेकिन यह नहीं जानते कि उन घटकों के साथ इसका उपयोग कैसे किया जाए। यह मेरा पहला ReactJS कोड है
 – 
dev
2 जिंदा 2021, 18:09
UseEffect कार्यात्मक प्रतिक्रिया घटक के लिए है। आप प्रतिक्रिया वर्ग घटक का उपयोग कर रहे हैं।
 – 
Anand Raj
2 जिंदा 2021, 18:10

1 उत्तर

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

कृपया देखें https://react-cn.github.io/ प्रतिक्रिया/टिप्स/संचार-बीच-घटकों.html

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

class Home extends React.Component {
  state = {
    showstatus: false
  };

  //... other code in Home component ...//

  //function that will be called from StatusInfo component
  handleStatusChange(params) {
      //your logic here
  }


  //render method for example only to understand easily
  render() {
    const uuid = this.state.uuid;     
    return this.state.showstatus ?
        (<StatusIcon onStausChange={this.handleStatusChange.bind(this)} uuid={uuid}>
            </StatusIcon>)
        :
        (<div></div>);
  }
}

उपरोक्त कोड में मैं onStatusChange नाम से पैरेंट कंपोनेंट से चाइल्ड कंपोनेंट में फंक्शन पास कर रहा हूं। आप onStatusChange के स्थान पर किसी अन्य नाम का उपयोग कर सकते हैं

चाइल्ड कंपोनेंट में, आप this.props.onStatusChange का उपयोग करके इस फ़ंक्शन को एक्सेस कर सकते हैं।

class StatusIcon extends React.Component {
  
  //...Code for StatusIcon component here ...//

  loadData = async (uuid) => {
    const taskstatus = await this.apiClient.checkStatus(uuid);
    console.log(taskstatus);
    this.setState({status: taskstatus});
    if(taskstatus === 'success') {
      clearInterval(this.intervalId);

      //Inform parent component about status change 
      //Pass all required details from StatusIcon to parent component here
      this.props.onStatusChange(taskstatus);
    }
  }

  //... render method ...//

}
1
Anand Raj 2 जिंदा 2021, 18:45
शुक्रिया! काम करता है! हालांकि एक छोटा सा साइड इफेक्ट है कि अगर मैं दूसरी बार दौड़ता हूं, तो चेकस्टैटस का पहला अनुरोध पुरानी आईडी यूयूआईडी को जाता है, लगातार अनुरोध सही नई आईडी यूयूआईडी के साथ होते हैं।
 – 
dev
3 जिंदा 2021, 01:33
इस्तेमाल किया गया कोड: 0bin.net/paste/…
 – 
dev
3 जिंदा 2021, 01:33
1
क्षमा करें मैंने अभी यह टिप्पणी देखी। मुझे जाँचने दो
 – 
Anand Raj
3 जिंदा 2021, 11:11
1
UUID मान को शोस्टैटस की तरह प्रारंभ नहीं किया गया है। हो सकता है कि इसका मान पहली बार अपरिभाषित हो
 – 
Anand Raj
3 जिंदा 2021, 19:37
1
ApiClient में अपरिभाषित चेक जोड़ा गया और "this.loadData (this.props.uuid); // भी तुरंत एक लोड करें" को हटा दिया और इसने दोनों मुद्दों को हल कर दिया। ऐसा लगता है कि यह बहुत तेज़ था और इसमें पुराने प्रोप थे
 – 
dev
4 जिंदा 2021, 11:15