एक प्रतिक्रिया एप्लिकेशन में सेटइंटरवाल

Question 1

मैं अभी भी रिएक्ट में काफी नया हूं, लेकिन मैं धीरे-धीरे पीस रहा हूं और मैंने कुछ का सामना किया है जो मैं फंस गया हूं।

मैं प्रतिक्रिया में एक "टाइमर" घटक बनाने की कोशिश कर रहा हूं, और ईमानदार होने के लिए मुझे नहीं पता कि क्या मैं यह अधिकार (या कुशलतापूर्वक) कर रहा हूं। नीचे मेरी कोड में, मैं एक वस्तु वापस जाने के लिए राज्य की स्थापना की { currentCount: 10 }और साथ कर रहा है componentDidMount, componentWillUnmountऔर renderऔर मैं केवल 10 से 9 तक "उलटी गिनती" करने के लिए राज्य प्राप्त कर सकते हैं।

दो-भाग का प्रश्न: मैं क्या गलत कर रहा हूँ? और, वहाँ setTimeout का उपयोग कर (बजाय का उपयोग कर के बारे में जाने के लिए एक अधिक कुशल तरीका है componentDidMountऔर componentWillUnmount)?

पहले ही, आपका बहुत धन्यवाद।

import React from 'react';

var Clock = React.createClass({

  getInitialState: function() {
    return { currentCount: 10 };
  },

  componentDidMount: function() {
    this.countdown = setInterval(this.timer, 1000);
  },

  componentWillUnmount: function() {
    clearInterval(this.countdown);
  },

  timer: function() {
    this.setState({ currentCount: 10 });
  },

  render: function() {
    var displayCount = this.state.currentCount--;
    return (
      <section>
        {displayCount}
      </section>
    );
  }

});

module.exports = Clock;

Question 2

मैं आपके कोड के साथ 4 मुद्दे देखता हूं:

आपकी टाइमर विधि में आप हमेशा अपनी वर्तमान संख्या 10 पर सेट कर रहे हैं
आप रेंडर पद्धति में स्थिति को अपडेट करने का प्रयास करते हैं
आप setStateवास्तव में राज्य को बदलने के लिए विधि का उपयोग नहीं करते हैं
आप राज्य में अपना अंतराल नहीं जमा रहे हैं

चलो ठीक करने की कोशिश करते हैं:

componentDidMount: function() {
   var intervalId = setInterval(this.timer, 1000);
   // store intervalId in the state so it can be accessed later:
   this.setState({intervalId: intervalId});
},

componentWillUnmount: function() {
   // use intervalId from the state to clear the interval
   clearInterval(this.state.intervalId);
},

timer: function() {
   // setState method is used to update the state
   this.setState({ currentCount: this.state.currentCount -1 });
},

render: function() {
    // You do not need to decrease the value here
    return (
      <section>
       {this.state.currentCount}
      </section>
    );
}

यह 10 से -N तक घटने वाले टाइमर में परिणत होगा। यदि आप ऐसा टाइमर चाहते हैं जो 0 तक घट जाए, तो आप थोड़ा संशोधित संस्करण का उपयोग कर सकते हैं:

timer: function() {
   var newCount = this.state.currentCount - 1;
   if(newCount >= 0) { 
       this.setState({ currentCount: newCount });
   } else {
       clearInterval(this.state.intervalId);
   }
},

Question 3

10 सेकंड की उलटी गिनती का उपयोग कर अद्यतन किया गया class Clock extends Component

import React, { Component } from 'react';

class Clock extends Component {
  constructor(props){
    super(props);
    this.state = {currentCount: 10}
  }
  timer() {
    this.setState({
      currentCount: this.state.currentCount - 1
    })
    if(this.state.currentCount < 1) { 
      clearInterval(this.intervalId);
    }
  }
  componentDidMount() {
    this.intervalId = setInterval(this.timer.bind(this), 1000);
  }
  componentWillUnmount(){
    clearInterval(this.intervalId);
  }
  render() {
    return(
      <div>{this.state.currentCount}</div>
    );
  }
}

module.exports = Clock;

Question 4

हुक का उपयोग करते हुए 10-सेकंड की उलटी गिनती अपडेट की गई (एक नया फीचर प्रस्ताव जो आपको क्लास लिखने के बिना राज्य और अन्य रिएक्ट सुविधाओं का उपयोग करने देता है। वे वर्तमान में रिएक्ट v16.7.0-अल्फा में हैं)।

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const Clock = () => {
    const [currentCount, setCount] = useState(10);
    const timer = () => setCount(currentCount - 1);

    useEffect(
        () => {
            if (currentCount <= 0) {
                return;
            }
            const id = setInterval(timer, 1000);
            return () => clearInterval(id);
        },
        [currentCount]
    );

    return <div>{currentCount}</div>;
};

const App = () => <Clock />;

ReactDOM.render(<App />, document.getElementById('root'));

Question 5

अगर किसी को सेटक्टटरवल लागू करने के लिए एक रिएक्ट हुक दृष्टिकोण की तलाश है। दान अब्रामोव ने अपने ब्लॉग पर इसके बारे में बात की । यदि आप कक्षा दृष्टिकोण सहित विषय के बारे में अच्छा पढ़ना चाहते हैं, तो इसे देखें। मूल रूप से कोड एक कस्टम हुक है जो कि घोषणापत्र के रूप में सेटलेट को बदल देता है।

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

सुविधा के लिए कोडसैंडबॉक्स लिंक भी पोस्ट करना: https://codesandbox.io/s/105x531vkq

Question 6

धन्यवाद @dotnetom, @ greg-herbowicz

अगर यह "this.state अपरिभाषित है" लौटता है - बाइंड टाइमर फ़ंक्शन:

constructor(props){
    super(props);
    this.state = {currentCount: 10}
    this.timer = this.timer.bind(this)
}

Question 7

प्रतिक्रिया वर्ग में हर पल अद्यतन स्थिति। मेरे सूचकांक पर ध्यान दें। जेएस एक फ़ंक्शन को पास करता है जो वर्तमान समय को वापस करता है।

import React from "react";

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

    this.state = {
      time: this.props.time,

    }        
  }
  updateMe() {
    setInterval(()=>{this.setState({time:this.state.time})},1000)        
  }
  render(){
  return (
    <div className="container">
      <h1>{this.state.time()}</h1>
      <button onClick={() => this.updateMe()}>Get Time</button>
    </div>
  );
}
}
export default App;