একটি প্রতিক্রিয়া অ্যাপ্লিকেশন মধ্যে সেট করুন

Question 1

প্রতিক্রিয়াটিতে আমি এখনও মোটামুটি নতুন, তবে আমি আস্তে আস্তে নাকাল হয়ে যাচ্ছি এবং এমন কিছু সমস্যার মুখোমুখি হয়েছি যা আমি আটকে গিয়েছি।

আমি প্রতিক্রিয়াতে একটি "টাইমার" উপাদান তৈরি করার চেষ্টা করছি, এবং সত্য কথা বলতে আমি জানি না আমি এই সঠিক (বা দক্ষতার সাথে) করছি কিনা। নিচে আমার কোড, আমি একটি বস্তু ফিরে যাওয়ার রাষ্ট্র সেট { currentCount: 10 }এবং সঙ্গে toying হয়েছে componentDidMount, componentWillUnmountএবং renderআমি মাত্র 10 থেকে 9 "কাউন্ট ডাউন করা" রাষ্ট্র পেতে পারেন।

দ্বি-অংশ প্রশ্ন: আমি কী ভুল করছি? এবং, সেটটাইমআউট (ব্যবহার 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-সেকেন্ডের কাউন্টডাউন আপডেট হয়েছে (একটি নতুন বৈশিষ্ট্য প্রস্তাব যা আপনাকে ক্লাস না লিখে রাজ্য এবং অন্যান্য প্রতিক্রিয়া বৈশিষ্ট্যগুলি ব্যবহার করতে দেয় They তারা বর্তমানে প্রতিক্রিয়া v16.7.0-alpha এ আছে)।

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

ধন্যবাদ @ ডটনেটম, @ গ্রেগ-হার্বোবিজ

যদি এটি "এই.স্টেটটি পূর্বনির্ধারিত হয়" - টাইমার ফাংশনটি বেঁধে দেয়:

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;

Question 8

প্রতিক্রিয়া হুক্সের সাথে সেটআইন্টারওয়াল পরিচালনা করুন:

  const [seconds, setSeconds] = useState(0)

  const interval = useRef(null)

  useEffect(() => { if (seconds === 60) stopCounter() }, [seconds])

  const startCounter = () => interval.current = setInterval(() => {
    setSeconds(prevState => prevState + 1)
  }, 1000)

  const stopCounter = () => clearInterval(interval.current)