त्रुटि: अधिकतम अद्यतन गहराई पार हो गई है। यह तब हो सकता है जब कोई कंपोनेंट बार-बार कंपोनेंटविलअपडेट या कंपोनेंटडिडअपडेट के अंदर सेटस्टेट को कॉल करता है। रिएक्ट अनंत लूप को रोकने के लिए नेस्टेड अपडेट की संख्या को सीमित करता है।

मेरे प्रश्न का उत्तर मिल गया, लेकिन, फिर भी, मुझे समझ नहीं आ रहा है कि इसे कैसे ठीक किया जाए?

const { useState } = React,
      { render } = ReactDOM

function App() {
  const [visible, setVisible] = useState(false);
  const [visible2, setVisible2] = useState(false);

  const arr1 = {
    company: [
      {
        id: "random1",
        companyName: "Apple"
      },
      {
        id: "random2",
        companyName: "Samsung"
      }
    ]
  };

  const onDataHandle = () => {
    return arr1.company.map(items => {
      return (
        <div>
          <span key={items.id}>
            {items.companyName}
            <span onClick={onHandleVisible}>Details</span>
          </span>
          <br />
        </div>
      );
    });
  };

  const onHandleVisible = () => {
    setVisible(!visible);
  };

  const onHandleVisible2 = () => {
    setVisible2(!visible2);
  };

  return (
    <div className="App">
      <button onClick={onHandleVisible2}>Show</button>
      {visible && onDataHandle()}
    </div>
  );
}

render (
  <App />,
  document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

मैं समझता हूं कि यह अंतहीन पुन: प्रतिपादन के कारण है, लेकिन समाधान क्या हैं?

0
luckydev 24 जिंदा 2020, 11:08

1 उत्तर

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

आपको अपने कोड तर्क में कई समस्याएं हैं (जो पूरी तरह से स्पष्ट नहीं है, मुझे कहना होगा):

  • दिखाएं बटन onClick onHandleVisible2 कॉलबैक ट्रिगर करता है जो visible2 स्टेट वेरिएबल को true पर सेट करता है, लेकिन उस स्टेट वेरिएबल के आधार पर आपके कोड में कुछ भी नहीं है, इसलिए कुछ नहीं होता
  • ब्लॉक {visible && onDataHandle()} को ट्रिगर करना चाहिए onDataHandle() (जो उपरोक्त कारण से कभी नहीं होता - visible false के बराबर रहता है), लेकिन onDataHandle() (भले ही प्रयास कुछ JSX लौटाएं) <App /> के भीतर रेंडर करने के लिए कुछ भी नहीं जोड़ेगा क्योंकि यह ReactJS घटक नहीं है
  • (मामूली एक) यदि आपका इरादा onDatahandle() के साथ कुछ घटक वापस करने का था, तो अपने स्पैन को अतिरिक्त <div> के साथ लपेटने का कोई मतलब नहीं है।

उपरोक्त सभी मुद्दों को ठीक करने के साथ, आपको कुछ मिलेगा, जैसे:

const { useState } = React,
      { render } = ReactDOM

function App() {
  const [visible, setVisible] = useState(false);
  const [visible2, setVisible2] = useState(false);

  const arr1 = {
    company: [
      {
        id: "random1",
        companyName: "Apple"
      },
      {
        id: "random2",
        companyName: "Samsung"
      }
    ]
  };

  const Data = () => (
    <div>
      {
        arr1.company.map(items => (
          <span key={items.id}>
            {items.companyName}
            <span onClick={onHandleVisible}>Details</span>
            {visible && <span>There go {items.companyName} details</span>}
            <br />
          </span>))
       }
    </div>
  )

  const onHandleVisible = () => {
    setVisible(!visible);
  };

  const onHandleVisible2 = () => {
    setVisible2(!visible2);
  };

  return (
    <div className="App">
      <button onClick={onHandleVisible2}>Show</button>
      {visible2 && <Data />}
    </div>
  );
}

render (
  <App />,
  document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

ध्यान दें उपरोक्त कोड ब्लॉक में एक महत्वपूर्ण समस्या अनसुलझी रहती है: आपने अपने संपूर्ण ऐप के लिए एकल चर (visible) का उपयोग किया है, इसलिए यदि आप प्रत्येक आइटम के लिए details की दृश्यता को नियंत्रित करने का निर्णय लेते हैं स्वतंत्र रूप से, आप अपने वर्तमान दृष्टिकोण से ऐसा नहीं कर पाएंगे। लेकिन यह एक पूरी तरह से अलग मुद्दा है जिसे आप एक अलग प्रश्न के रूप में पोस्ट कर सकते हैं।

2
Yevgen Gorbunkov 24 जिंदा 2020, 14:39