javascript - जब सेटटेरवल के भीतर प्रतिक्रिया स्थिति हुक का उपयोग करते हुए अपडेट नहीं हो रहा है




reactjs react-hooks (3)

इसका कारण यह है कि कॉलबैक को सेट setInterval में बंद कर दिया गया है, केवल पहले रेंडर में time चर तक पहुंचता है, इसके बाद के रेंडर में नए time मूल्य तक पहुंच नहीं होती है क्योंकि दूसरी बार उपयोग नहीं किया जाता है।

time हमेशा setInterval कॉलबैक के भीतर 0 का मान होता है।

setState तरह आप परिचित हैं, राज्य हुक के दो रूप हैं: एक जहां यह अद्यतन स्थिति में होता है, और कॉलबैक फॉर्म जिसे वर्तमान स्थिति में पारित किया जाता है। आपको दूसरे फॉर्म का उपयोग करना चाहिए और setState भीतर नवीनतम राज्य मान पढ़ना चाहिए। कॉलबैक यह सुनिश्चित करने के लिए कि आपके पास वेतन वृद्धि से पहले नवीनतम स्थिति है।

बोनस: वैकल्पिक दृष्टिकोण

Dan Abramov, अपने ब्लॉग पोस्ट में हुक के साथ setInterval का उपयोग करने के विषय में गहराई से जाता है और इस मुद्दे के आसपास वैकल्पिक तरीके प्रदान करता है। अत्यधिक इसे पढ़ने की सलाह देते हैं!

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(prevTime => prevTime + 1); // <-- Change this line!
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return (
    <div>Seconds: {time}</div>
  );
}

ReactDOM.render(<Clock />, document.querySelector('#app'));
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

मैं नए रिएक्ट हुक की कोशिश कर रहा हूं और एक काउंटर के साथ क्लॉक कंपोनेंट है जिसे हर सेकंड बढ़ाना है। हालाँकि, मान एक से अधिक नहीं बढ़ता है।

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(time + 1);
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return (
    <div>Seconds: {time}</div>
  );
}

ReactDOM.render(<Clock />, document.querySelector('#app'));
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>


एक वैकल्पिक समाधान का उपयोग करने के लिए उपयोग किया useReducer , क्योंकि यह हमेशा चालू राज्य पारित किया जाएगा।

function Clock() {
  const [time, dispatch] = React.useReducer((state = 0, action) => {
    if (action.type === 'add') return state + 1
    return state
  });
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      dispatch({ type: 'add' });
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return (
    <div>Seconds: {time}</div>
  );
}

ReactDOM.render(<Clock />, document.querySelector('#app'));
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>


useEffect फ़ंक्शन को केवल एक बार घटक माउंट पर मूल्यांकन किया जाता है जब खाली इनपुट सूची प्रदान की जाती है।

जब भी राज्य अपडेट किया जाता है, हर बार सेट setTimeout साथ नया अंतराल सेट करने के लिए एक वैकल्पिक सेट है:

  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = setTimeout(() => {
      setTime(time + 1);
    }, 1000);
    return () => {
      clearTimeout(timer);
    };
  }, [time]);

setTimeout का प्रदर्शन प्रभाव नगण्य है और आमतौर पर इसे नजरअंदाज किया जा सकता है। जब तक घटक उस बिंदु के लिए समय के प्रति संवेदनशील नहीं होता है जहां नए सेट टाइमआउट अवांछनीय प्रभाव का कारण बनते हैं, दोनों setInterval और setTimeout दृष्टिकोण स्वीकार्य हैं।





react-hooks