React: बग: ठीक करना बहुत कठिन है "किसी भिन्न घटक के फ़ंक्शन बॉडी के अंदर से किसी घटक को अपडेट नहीं कर सकता।"

काश हमने यह चेतावनी पहले जोड़ दी होती। मुझे खेद है कि हमने नहीं किया। यह हुक की शुरूआत के साथ एक निरीक्षण था। मेरा मानना ​​​​है कि यह नए कोड के कारण होना चाहिए जो हुक का उपयोग करता है, क्योंकि कक्षाओं के लिए पहले से ही एक ही चेतावनी थी, इसलिए पहले के किसी भी कोड ने इस चेतावनी को पहले ही देखा होगा।

ध्यान दें कि यह संभवतः प्रतिक्रिया के भविष्य के संस्करणों में कठिन विफलता शुरू कर देगा। जानबूझकर या अन्यथा (हमारे पास इस पैटर्न के साथ बहुत सी बग हैं)। तो परवाह किए बिना, आप अंत में एक पुराने संस्करण पर अटक सकते हैं। यदि इसे ठीक करना संभव नहीं है, तो मैं रिएक्ट के पुराने संस्करण को पिन करने की सलाह दूंगा।

हालांकि, उस ने कहा, हम आपकी मदद करना चाहते हैं और इन्हें ठीक करना जितना संभव हो सके उतना आसान बनाना चाहते हैं, जिसमें यह देखना भी शामिल है कि क्या हमें निश्चित संस्करण प्रकाशित करने के लिए पुस्तकालय लेखकों से मदद मिल सकती है।

यदि आप क्रोम कंसोल में छोटे > तीर का विस्तार करते हैं तो आपको एक अतिरिक्त स्टैक ट्रेस भी देखना चाहिए (आपके स्क्रीन शॉट में घटक स्टैक के अतिरिक्त)। क्या आप इसे भी पोस्ट कर सकते हैं? यह आपको सटीक कॉलसाइट दिखाना चाहिए जो रेंडर में दुष्प्रभाव पैदा कर रहा है।

मेरे साथ यह तब प्रकट होता है जब मैं फॉर्मिक का उपयोग करता हूं

@sebmarkbage प्रतिक्रिया के लिए धन्यवाद। > क्लिक करने के बाद दिखने वाला स्टैकट्रेस हास्यास्पद है। इसमें 200+ आइटम हैं!

मैं इसे वहां पेस्ट करने जा रहा था या पेस्टबिन को एक लिंक दे रहा था लेकिन एक अलग दिशा की कोशिश की। मैं कुछ प्रयुक्त पुस्तकालयों के जीथब मुद्दों के माध्यम से चला गया और पाया कि संदिग्धों में से एक रेडक्स-फॉर्म है: https://github.com/redux-form/redux-form/issues/4619। मुझे आशा है कि यह एकमात्र पुस्तकालय है जो त्रुटियों का कारण बनता है और मैं प्रतिक्रिया को अपग्रेड करने से पहले एक फिक्स की प्रतीक्षा करने जा रहा हूं।

लेकिन फिर भी, मैं इस मुद्दे को बंद नहीं करने के लिए कहूंगा और मैं अन्य डेवलपर्स को यहां पुस्तकालयों का उल्लेख करने का प्रस्ताव देता हूं जो इन त्रुटियों का कारण बनते हैं।

@RodolfoSilva क्या आप सुनिश्चित हैं कि यह फॉर्मिक के कारण होता है? यदि हां, तो क्या आप कृपया वहां कोई समस्या बना सकते हैं और उसका लिंक यहां पोस्ट कर सकते हैं? यदि सूची में एक से अधिक आइटम होने जा रहे हैं तो मैं अपने पहले संदेश की शुरुआत में ऐसे मुद्दों की एक सूची बनाने जा रहा हूं।

इसे वास्तव में ASAP संबोधित करने की आवश्यकता है। यह उन्नयन को असंभव बना देता है। त्रुटि ट्रेस काफी असंभव है।

हम्म। मुझे आश्चर्य है कि त्रुटि संदेश में देखने के लिए कौन सी रेखा का वर्णन करने में मदद मिलेगी।

इस मामले में देखने के लिए पहली पंक्ति dispatchAction बाद की रेखा है। यही वह चीज होनी चाहिए जो रिएक्ट में कॉल करे।

@RodolfoSilva क्या आप FormItemInput.js का स्रोत पोस्ट कर सकते हैं, अगर यह कुछ ऐसा है जिसे आप साझा कर सकते हैं? ऐसा लगता है कि डिस्पैच या सेटस्टेट को लाइन 71 पर कॉल किया जा रहा है।

मुझे लगता है कि यह जरूरी है कि इस त्रुटि संदेश को संशोधित किया जाए ताकि यह शामिल हो सके कि कोड की कौन सी पंक्ति त्रुटि पैदा कर रही है। यह निर्धारित करना लगभग असंभव है कि यह स्थानीय कोड है या पुस्तकालय कोड जो समस्या पैदा कर रहा है। बाहरी पुस्तकालय पुस्तकालय जैसे प्रतिक्रिया-रिडक्स और प्रतिक्रिया-राउटर सबसे अधिक संभावना है कि अपराधी बहुत अच्छी तरह

मुझे पूरा यकीन है कि रिएक्ट-रेडक्स यहां गलती पर नहीं है, लेकिन सहमत है कि त्रुटि संदेश और घटक स्टैक यह जानना मुश्किल है कि वास्तव में क्या हो रहा है।

मुझे Redux-form के साथ एक ही समस्या का सामना करना पड़ता है!

मुझे एक ही समस्या है और मैं देख रहा हूं कि चेतावनी पहली बार दिख रही है कि मैं अपने रेडक्स फ़ील्ड में लिखता हूं या जब मैं इसे साफ़ करता हूं

मुझे भी वह समस्या है, यह मेरा घटक है:

`कॉन्स्ट [कीमत, सेटप्राइस] = यूज़स्टेट (0);

स्थिरांक अद्यतन मूल्य = (नई कीमत) => {
सेटप्राइस (नई कीमत)
}
< CardContainer onPriceUpdated={updatePrice} > CardContainer >
`

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

अगर आप लोगों के पास इस चेतावनी को हल करने के लिए कोई सुझाव है तो मैं इसकी सराहना करूंगा ``

@l0gicgate

मुझे लगता है कि यह जरूरी है कि इस त्रुटि संदेश को संशोधित किया जाए ताकि यह शामिल हो सके कि कोड की कौन सी पंक्ति त्रुटि पैदा कर रही है।

जावास्क्रिप्ट में हम क्या कर सकते हैं इसकी एक सीमा है। लेकिन सारी जानकारी उस स्टैक में है जो आप ब्राउज़र में देखते हैं । आपको केवल उन पंक्तियों को छोड़ना है जो रिएक्ट के अंदर हैं।

जावास्क्रिप्ट स्टैक देखने के लिए, आपको त्रुटि संदेश के आगे एक छोटे तीर पर क्लिक करना होगा ।

उदाहरण के लिए, पहले के इस स्क्रीनशॉट को देखें:

मैं सराहना करता हूं कि ढेर के माध्यम से खोदना थोड़ा परेशान है, लेकिन पहले कई फ्रेमों को छोड़ना मुश्किल नहीं होना चाहिए। अगला फ्रेम ही समस्या का स्रोत है। इस मामले में, यह फॉर्मिक लाइब्रेरी के अंदर कुछ ऐसा लगता है। तो आप इसके साथ एक मुद्दा दर्ज कर सकते हैं।

@martinezwilmer यह उदाहरण मदद करने के लिए बहुत छोटा है। कृपया एक सैंडबॉक्स बनाएं।

भविष्य के टिप्पणीकारों के लिए। मैं समझता हूं कि एक नई चेतावनी देखना निराशाजनक है। लेकिन यह वैध मुद्दों को इंगित करता है जो संभावित रूप से आपके कोड में बग पैदा कर रहे हैं । यदि आप व्यंग्य और झुंझलाहट व्यक्त करने से परहेज कर सकते हैं तो हम बहुत आभारी होंगे।

यदि आप स्टैक ट्रेस में यह नहीं समझ पा रहे हैं कि यह कहां से आ रहा है, तो कृपया स्क्रीनशॉट पोस्ट करें या पुनरुत्पादित सैंडबॉक्स बनाएं और हम मदद करने का प्रयास करेंगे। इनमें से अधिकांश संभवत: कुछ पुस्तकालयों से आ रहे हैं, इसलिए सबसे अधिक उपयोगी बात यह है कि इन मामलों को कम किया जाए और फिर उन पुस्तकालयों के साथ समस्या दर्ज की जाए।

आप सभी को धन्यवाद।

यहां चेतावनी से संबंधित सटीक रेखा खोजना मुश्किल है:

@gaearon क्या आपके पास फिर से इसके बारे में एक टिप है?

यहां चेतावनी से संबंधित सटीक रेखा खोजना मुश्किल है:

क्या मुश्किल बनाता है? जैसा कि मैंने ऊपर उल्लेख किया है कि यह पहली पंक्ति है जो दाईं ओर "प्रतिक्रिया" नहीं कहती है। इस मामले में, यह Redux से connectAdvanced है। कृपया रिएक्ट रेडक्स में एक समस्या दर्ज करें ताकि अनुरक्षकों को इसे देखने का मौका मिले।

जैसा कि मैंने अपथ्रेड कहा, मुझे _very_ आश्चर्य होगा यदि यहां जो कुछ भी हो रहा है वह React-Redux के साथ एक समस्या है।

उस ने कहा, मैं यह भी निश्चित नहीं हूं कि इस संदेश को पहली जगह में क्या ट्रिगर करता है। त्रुटि संदेश क्या कह रहा है, मुझे आधा मिलता है, लेकिन वास्तव में किस प्रकार का ऐप कोड पैटर्न उस व्यवहार का एक उदाहरण होगा?

मैं हाल ही में इसमें भाग गया और फिक्स setState हैंडलर कॉल साइटों को useEffect लपेट रहा था, जैसे: https://github.com/airbnb/lunar/commit/db08613d46ea21089ead3e7b5cfff995f15c69a7#diff -1c3bdd397b1ce506414248887 ( onChange और onSubmit श्रृंखला के ऊपर setState उपयोग करें)।

@martinezwilmer onPriceUpdated कहाँ कहा जा रहा है? शायद इसे useEffect में लपेटने का प्रयास करें?

ऐसा ही मुद्दा urql लिए हो रहा है

हम अपने अपडेट को व्यवस्थित करने के लिए use-subscription + वोंका (स्ट्रीम के लिए) का उपयोग कर रहे हैं, हालांकि एक अपडेट समकालिक रूप से आ सकता है। यहां हम पहले ही todos इसलिए यदि हम Open बटन पर क्लिक करते हैं तो परिणाम तुरंत पॉप अप होना चाहिए, हालांकि यह निम्न त्रुटि को ट्रिगर करने लगता है।

हमारे मामले में यह इरादा है, हम एक सिंक परिणाम के लिए सिर्फ fetching: true नहीं दिखा सकते हैं, जिसके परिणामस्वरूप उछल-कूद करने वाले इंटरफेस होंगे।

यह अब तीसरे पक्ष के पुस्तकालयों में अधिक से अधिक क्रॉप करना शुरू कर रहा है: urql , Apollo ।

मैं इसमें भाग गया और कई घंटों तक मुझे लगा कि समस्या मेरे कोड में है। संघनित स्टैकट्रेस मेरे घटकों पर इंगित करता है, और जब मैं _did_ स्पष्ट रूप से एक त्रुटि ट्रिगर करता हूं, तो विस्तारित स्टैकट्रेस में तृतीय पक्ष पुस्तकालयों को देखना मेरे लिए असामान्य नहीं है। इस विशेष चेतावनी में मेरे (यद्यपि सीमित) शोध से, ऐसा लगता है कि अधिकांश डेवलपर्स स्वयं इस समस्या का कारण नहीं बन रहे हैं, बल्कि कोड के आधार पर हैं। आमतौर पर यह मान लेना अच्छा अभ्यास है कि यह एक बग अपस्ट्रीम नहीं है, लेकिन जब यह एक अपस्ट्रीम बग है, तो आपके कोड में एक समस्या को ट्रैक करने में समय बर्बाद करना जो मौजूद नहीं है, बल्कि निराशा होती है। क्या प्रतिक्रिया एक औसत उपयोगकर्ता को यह निर्धारित करने में मदद करने के लिए कुछ भी कर सकती है कि क्या वह कोड था जो उन्होंने लिखा था, या जिस कोड पर वे निर्भर करते हैं वह समस्या का कारण बनता है?

अपोलो मुद्दे से एक बात जो मैंने नोट की वह है:

चेतावनी का स्टैकट्रैक उस घटक को दिखा रहा है जिसने परिवर्तनों को प्रारंभ किया, न कि वह जो उन परिवर्तनों द्वारा [sic] फिर से प्रस्तुत किया गया हो

अगर यह सही है, तो क्या रिएक्ट यहां अधिक जानकारी दे सकता है? शायद हमें आरंभ करने वाले घटक और इसके अद्यतन किए जाने वाले घटकों दोनों के बारे में बता रहे हैं?

@hugo की तरह, मुझे एक नए आयनिक एप्लिकेशन का परीक्षण करते समय इसका सामना करना पड़ा:

1. npx ionic start demo sidemenu --type=react
2. react-scripts test

दरअसल, कारण स्टैक ट्रेस के बीच और नीचे दबे हुए हैं।

console.error node_modules/react-dom/cjs/react-dom.development.js:88
    Warning: Cannot update a component from inside the function body of a different component.
        in Route (at App.tsx:37)
        in View (created by StackManagerInner)
        in ViewTransitionManager (created by StackManagerInner)
        in ion-router-outlet (created by IonRouterOutlet)
        in IonRouterOutlet (created by ForwardRef(IonRouterOutlet))
        in ForwardRef(IonRouterOutlet) (created by StackManagerInner)
        in StackManagerInner (created by Context.Consumer)
        in Unknown (created by Component)
        in Component (created by ForwardRef(IonRouterOutlet))
        in ForwardRef(IonRouterOutlet) (at App.tsx:36)
        in ion-split-pane (created by IonSplitPane)
        in IonSplitPane (created by ForwardRef(IonSplitPane))
        in ForwardRef(IonSplitPane) (at App.tsx:34)
        in NavManager (created by RouteManager)
        in RouteManager (created by Context.Consumer)
        in RouteManager (created by IonReactRouter)
        in Router (created by BrowserRouter)
        in BrowserRouter (created by IonReactRouter)
        in IonReactRouter (at App.tsx:33)
        in ion-app (created by IonApp)
        in IonApp (created by ForwardRef(IonApp))
        in ForwardRef(IonApp) (at App.tsx:32)
        in App (at App.test.tsx:6)

यह समस्या इस समस्या के संबंध में मेरे द्वारा खोजी जा सकने वाली सबसे नज़दीकी समस्या थी।

हमें एक विशिष्ट पैटर्न मिला जो https://github.com/mobxjs/mobx-react/issues/846 में इस समस्या का कारण बनता है।

@sebmarkbage मैं अब इस समस्या को पुन: पेश नहीं कर सकता। हमने कुछ पुस्तकालयों और समस्याओं को अद्यतन किया है।

@jgoux हमें एक ही समस्या का सामना करना पड़ रहा है @ क्लोविस ^^ स्पॉटेड

react 16.13.0 अद्यतन प्रतिक्रिया के बाद मुझे यह त्रुटि मिलनी शुरू हुई। समस्या बहुत स्पष्ट है क्योंकि एक विशिष्ट क्रिया के बाद मेरा एक घटक दूसरे को अपडेट कर रहा है। हालांकि, यह निश्चित नहीं है कि यह चेतावनी क्यों देगा। इस के आसपास कैसे जाना है इस पर कोई सुझाव?

@gaearon स्टैक से डिबग करने के विवरण के लिए धन्यवाद, मैं व्यक्तिगत रूप से यह पता लगाने में सक्षम नहीं होता कि यह त्रुटि कहां से आ रही थी यदि आपने वह उदाहरण नहीं दिया था। 🙏

सुनिश्चित नहीं है कि मेरी समस्या संबंधित है, हालांकि, मैं अपने फॉर्म घटक की स्थिति को अपडेट करने का प्रयास कर रहा हूं, लेकिन जब भी मैं ऑन चेंज हैंडलर जोड़ने का प्रयास करता हूं, तो यह मुझे यह त्रुटि देता रहता है। ध्यान रहे, मैं प्रतिक्रिया-jsonschema-form का उपयोग कर रहा हूं और फॉर्म घटक आयात कर रहा हूं और मैं राज्य को अद्यतन करने के लिए इसकी ऑनचेंज संपत्ति का उपयोग कर रहा हूं ..

मेरे लिए, यह वह पैटर्न है जो समस्या का कारण बनता है।

इसके आसपास कोई रास्ता हो सकता है। लेकिन कंसोल लॉग ने मुझे सीधे लाइन 385 . पर इंगित किया

मैं प्रतिक्रिया करने के लिए नया हूँ लेकिन मेरे पास इस तरह का कोड था:

import React, { useState } from "react";

function Home() {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(true)}
        type="button"
        className="btn"
      >
        X
      </button>
      {mobileNavOpen && <MobileNav setMobileNavOpen={setMobileNavOpen}/>}
    </div>
  );
}

function MobileNav() {
  return (
    <div>
      <button
        onClick={setMobileNavOpen(false)} //problem here
        type="button"
        className="btn"
      >
        X
      </button>
    </div>
  );
}

export default Home;

जिसके परिणामस्वरूप: Cannot update a component from inside the function body of a different component.

मुझे बस इतना करना है कि MobileNav में MobileNavOpen को सेट करने के लिए एक एरो फंक्शन जोड़ें:

import React, { useState } from "react";

function Home() {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(true)}
        type="button"
        className="btn"
      >
        X
      </button>
      {mobileNavOpen && <MobileNav setMobileNavOpen={setMobileNavOpen}/>}
    </div>
  );
}

function MobileNav() {
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(false)} //fixes problem
        type="button"
        className="btn"
      >
        X
      </button>
    </div>
  );
}

export default Home;

और यह समस्या को ठीक करता है, आशा है कि यह किसी की मदद करेगा!

मैं प्रतिक्रिया करने के लिए नया हूँ लेकिन मेरे पास इस तरह का कोड था:

import React, { useState } from "react";

function Home() {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(true)}
        type="button"
        className="btn"
      >
        X
      </button>
      {mobileNavOpen && <MobileNav setMobileNavOpen={setMobileNavOpen}/>}
    </div>
  );
}

function MobileNav() {
  return (
    <div>
      <button
        onClick={setMobileNavOpen(false)} //problem here
        type="button"
        className="btn"
      >
        X
      </button>
    </div>
  );
}

export default Home;

जिसके परिणामस्वरूप: Cannot update a component from inside the function body of a different component.

मुझे बस इतना करना है कि MobileNav में MobileNavOpen को सेट करने के लिए एक एरो फंक्शन जोड़ें:

import React, { useState } from "react";

function Home() {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(true)}
        type="button"
        className="btn"
      >
        X
      </button>
      {mobileNavOpen && <MobileNav setMobileNavOpen={setMobileNavOpen}/>}
    </div>
  );
}

function MobileNav() {
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(false)} //fixes problem
        type="button"
        className="btn"
      >
        X
      </button>
    </div>
  );
}

export default Home;

और यह समस्या को ठीक करता है, आशा है कि यह किसी की मदद करेगा!

आपका उदाहरण वास्तव में उन शुरुआती गलतियों में से एक है जो लोग प्रतिक्रिया के साथ करते हैं। मुझे यकीन नहीं है कि यह वही मुद्दा है जिस पर यहां चर्चा की जा रही है। आपकी लाइन यहां: onClick={setMobileNavOpen(false) बटन टेंडर के दौरान फ़ंक्शन को कॉल कर रही है, क्लिक पर नहीं। इसलिए इसे एरो फंक्शन में लपेटने से यह ठीक हो जाता है।

मैं रिएक्ट राउटर के साथ इस मुद्दे में भाग गया, जहां मुझे उपयोगकर्ता को एक अलग स्थान पर <Redirect> से पहले एक Redux कार्रवाई भेजने की आवश्यकता थी। समस्या यह लग रही थी कि प्रेषण समाप्त होने से पहले रीडायरेक्ट हुआ था। मैंने अपनी कार्रवाई का वादा करके समस्या का समाधान किया।

पहले:

<Route
  render={routeProps => {
    setRedirectionTarget(somePath(routeProps));
    return <Redirect to={someOtherPath} />;
  }}
/>;

function mapDispatchToProps(dispatch: ThunkDispatch) {
  return {
    setRedirectionTarget: (target: string | null) => dispatch(setRedirectionTarget(target))
  };
}

export const setRedirectionTarget = (location: string | null): SetRedirectionTarget => {
  return {
    type: SET_REDIRECTION_TARGET,
    location
  };
};

बाद में:

function mapDispatchToProps(dispatch: ThunkDispatch) {
  return {
    setRedirectionTarget: async (target: string | null) => dispatch(await setRedirectionTarget(target))
  };
}

export const setRedirectionTarget = (location: string | null): Promise<SetRedirectionTarget> => {
  return Promise.resolve({
    type: SET_REDIRECTION_TARGET,
    location
  });
};

मुझे लगता है कि यह त्रुटि संदेश बनाने के लिए उन दोनों घटकों के नाम शामिल करेगा जो वर्तमान में प्रस्तुत कर रहे हैं, और वह घटक जिसका सेटस्टेट कहा जा रहा है। क्या कोई इसके लिए पीआर भेजना चाहता है?

मुझे लगता है कि यह त्रुटि संदेश बनाने के लिए उन दोनों घटकों के नाम शामिल करेगा जो वर्तमान में प्रस्तुत कर रहे हैं, और वह घटक जिसका सेटस्टेट कहा जा रहा है। क्या कोई इसके लिए पीआर भेजना चाहता है?

मुझे इस पर एक नज़र डालने में खुशी हो रही है। कोई संकेत जो मुझे पता होना चाहिए?

@ samcooke98 मैंने इसके लिए एक पीआर खोला है https://github.com/facebook/react/pull/18316

जैसा कि अन्य ने बताया है कि आप इस मुद्दे में भाग सकते हैं यदि आपके पास एक हुक में सदस्यता है जैसे कि अपोलो के साथ और डेटा प्राप्त करने पर एक स्टोर को अपडेट करने का प्रयास करें। सरल समाधान useEffect उदाहरण के लिए उपयोग करना है

export const useOrderbookSubscription = marketId => {
  const { data, error, loading } = useSubscription(ORDERBOOK_SUBSCRIPTION, {
    variables: {
      marketId,
    },
  })

  const formattedData = useMemo(() => {
    // Don't dispatch in here.
  }, [data])

  // Don't dispatch here either

  // Dispatch in a useEffect
  useEffect(() => {
    orderbookStore.dispatch(setOrderbookData(formattedData))
  }, [formattedData])

  return { data: formattedData, error, loading }
}

हम हाइपर में इस समस्या का सामना कर रहे थे लेकिन हम हुक का उपयोग नहीं कर रहे हैं, और कॉल स्टैक से रेंडर कॉल में कुछ भी नहीं मिला। लेकिन स्टैक में UNSAFE_componentWillReceiveProps में एक कॉल आई थी। अद्यतन कर रहा है कि componentDidUpdate के साथ हमारे लिए समस्या तय हो गई है https://github.com/zeit/hyper/pull/4382
इसे यहां पोस्ट करें अगर यह किसी की मदद कर सकता है

यहां भी, एक UNSAFE_componentWillMount कॉल था, इसे बदलने/हटाने से समस्या ठीक हो गई

लेकिन हम हुक का उपयोग नहीं कर रहे हैं, और कॉल स्टैक से रेंडर कॉल में कुछ भी नहीं पा सके

यह अजीब लगता है। मुझे यकीन नहीं है कि आपको यह चेतावनी कैसे मिल रही है। यह केवल तभी सक्रिय होता है जब सेटस्टेट फ़ंक्शन घटक से संबंधित हो। आपका ढेर कैसा है?

लेकिन हम हुक का उपयोग नहीं कर रहे हैं, और कॉल स्टैक से रेंडर कॉल में कुछ भी नहीं पा सके

यह अजीब लगता है। मुझे यकीन नहीं है कि आपको यह चेतावनी कैसे मिल रही है। यह केवल तभी सक्रिय होता है जब सेटस्टेट फ़ंक्शन घटक से संबंधित हो। आपका ढेर कैसा है?

Redux के साथ क्लास कंपोनेंट्स, और फंक्शन्स जो कॉम्पोनेंट्स पर प्लगइन्स लागू करते हैं। शायद इसीलिए इसे फंक्शन कंपोनेंट के रूप में गिना जाता है? लेकिन फिर जीवनचक्र के हुक को अपडेट करने से यह ठीक क्यों हो जाता है?

मुझे यकीन नहीं है। क्या आप सैंडबॉक्स में एक अलग उदाहरण बनाने की कोशिश कर सकते हैं? मेरे पास एक कूबड़ है कि आप कुछ और अप्रत्याशित कर रहे होंगे।

सुनिश्चित नहीं है कि मैं इसे एक अलग उदाहरण में दोहराने में सक्षम हूं। मुझे कारण खोजने का प्रयास करने में कठिन समय था, और जीवनचक्र हुक को अभी अपडेट किया था क्योंकि यह स्टैक ट्रेस में था और अद्यतन के लिए लंबित था। इसने किसी तरह मामला ठीक किया।
आप उस समय रेपो पर एक नज़र डाल सकते हैं जब यहां समस्या थी

क्या यह इस तथ्य के कारण हो सकता है कि उस समय घटक में UNSAFE_componentWillReceiveProps और componentDidUpdate दोनों थे (असुरक्षित वहां गलती से छोड़ दिया गया था)?

मुझे यह चेतावनी भी मिल रही है, और स्टैक ट्रेस setScriptLoaded हुक की ओर इशारा करता है (मेरे कस्टम हुक के लिए नीचे देखें)। तो ऐसा प्रतीत होता है कि भले ही मैं useEffect का उपयोग कर रहा हूं, फिर भी प्रतिक्रिया एक चेतावनी फेंक देगी यदि setState हैंडलर अन्य एसिंक कॉलबैक के भीतर घोंसला है (मेरे मामले में, यह setTimeout में घोंसला है load ईवेंट हैंडलर)? मैं पहली बार हुक का उपयोग कर रहा हूं, इसलिए मैं किसी भी सलाह की सराहना करूंगा। शुक्रिया!

/**
 * Detect when 3rd party script is ready to use
 * 
 * <strong i="11">@param</strong> {function} verifyScriptLoaded Callback to verify if script loaded correctly
 * <strong i="12">@param</strong> {string} scriptTagId 
 */

export const useScriptLoadStatus = (verifyScriptLoaded, scriptTagId) => {
    let initLoadStatus = true; // HTML already includes script tag when rendered server-side
    if (__BROWSER__) {
        initLoadStatus = typeof verifyScriptLoaded === 'function' ? verifyScriptLoaded() : false;
    }
    const [isScriptLoaded, setScriptLoaded] = useState(initLoadStatus); 

    useEffect(() => {
        if (!isScriptLoaded) {
            // need to wrap in setTimeout because Helmet appends the script tags async-ly after component mounts (https://github.com/nfl/react-helmet/issues/146)
            setTimeout(() => {
                let newScriptTag = document.querySelector(`#${scriptTagId}`);
                if (newScriptTag && typeof verifyScriptLoaded === 'function') {
                    newScriptTag.addEventListener('load', () => { 
                        return verifyScriptLoaded() ? setScriptLoaded(true) : null;
                    });
                    // double check if script is already loaded before the event listener is added
                    return verifyScriptLoaded() ? setScriptLoaded(true) : null;
                }
            }, 100);
        }
    });

    return isScriptLoaded;
};

@LabhanshAgrawal

क्या यह इस तथ्य के कारण हो सकता है कि UNSAFE_componentWillReceiveProps और घटकडिडअपडेट दोनों उस समय घटक में थे (असुरक्षित एक गलती से वहां छोड़ दिया गया था)?

मुझे नहीं लगता कि कोई भी जीवनचक्र विधियाँ यहाँ बिल्कुल भी प्रासंगिक हैं। इसलिए मैं कह रहा हूं कि आपके उदाहरण में कुछ अजीब है।

@suhanw कृपया

@LabhanshAgrawal क्या आप कृपया अपना पूरा स्टैक पोस्ट कर सकते हैं? मुझे लगता है कि जो हो रहा है वह यह है कि आपका UNSAFE_componentWillReceiveProps (जो प्रतिपादन के बराबर है) किसी अन्य घटक पर setState पर कॉल करता है।

backend.js:6 Warning: Cannot update a component from inside the function body of a different component.
    in Term                           (created by _exposeDecorated(Term))
    in _exposeDecorated(Term)         (created by DecoratedComponent)
    in DecoratedComponent             (created by TermGroup_)
    in TermGroup_                     (created by ConnectFunction)
    in ConnectFunction                (created by Connect(TermGroup_))
    in Connect(TermGroup_)            (created by _exposeDecorated(TermGroup))
    in _exposeDecorated(TermGroup)    (created by DecoratedComponent)
    in DecoratedComponent             (created by Terms)
    in div                            (created by Terms)
    in div                            (created by Terms)
    in Terms                          (created by _exposeDecorated(Terms))
    in _exposeDecorated(Terms)        (created by DecoratedComponent)
    in DecoratedComponent             (created by ConnectFunction)
    in ConnectFunction                (created by Connect(DecoratedComponent))
    in Connect(DecoratedComponent)    (created by Hyper)
    in div                            (created by Hyper)
    in div                            (created by Hyper)
    in Hyper                          (created by _exposeDecorated(Hyper))
    in _exposeDecorated(Hyper)        (created by DecoratedComponent)
    in DecoratedComponent             (created by ConnectFunction)
    in ConnectFunction                (created by Connect(DecoratedComponent))
    in Connect(DecoratedComponent)
    in Provider
r                                     @ backend.js:6
printWarning                          @ react-dom.development.js:88
error                                 @ react-dom.development.js:60
warnAboutRenderPhaseUpdatesInDEV      @ react-dom.development.js:23260
scheduleUpdateOnFiber                 @ react-dom.development.js:21196
dispatchAction                        @ react-dom.development.js:15682
checkForUpdates                       @ connectAdvanced.js:88
handleChangeWrapper                   @ Subscription.js:97
(anonymous)                           @ Subscription.js:23
batchedUpdates$1                      @ react-dom.development.js:21887
notify                                @ Subscription.js:19
notifyNestedSubs                      @ Subscription.js:92
checkForUpdates                       @ connectAdvanced.js:77
handleChangeWrapper                   @ Subscription.js:97
(anonymous)                           @ Subscription.js:23
batchedUpdates$1                      @ react-dom.development.js:21887
notify                                @ Subscription.js:19
notifyNestedSubs                      @ Subscription.js:92
handleChangeWrapper                   @ Subscription.js:97
dispatch                              @ redux.js:222
e                                     @ VM64:1
(anonymous)                           @ effects.ts:11
(anonymous)                           @ write-middleware.ts:14
(anonymous)                           @ index.js:11
(anonymous)                           @ plugins.ts:538
(anonymous)                           @ plugins.ts:540
(anonymous)                           @ index.js:11
dispatch                              @ redux.js:638
(anonymous)                           @ sessions.ts:124
(anonymous)                           @ index.js:8
dispatch                              @ VM64:1
onResize                              @ terms.ts:62
(anonymous)                           @ term.js:179
e.fire                                @ xterm.js:1
t.resize                              @ xterm.js:1
e.resize                              @ xterm.js:1
e.fit                                 @ xterm-addon-fit.js:1
fitResize                             @ term.js:291
UNSAFE_componentWillReceiveProps      @ term.js:408
callComponentWillReceiveProps         @ react-dom.development.js:12998
updateClassInstance                   @ react-dom.development.js:13200
updateClassComponent                  @ react-dom.development.js:17131
beginWork                             @ react-dom.development.js:18653
beginWork$1                           @ react-dom.development.js:23210
performUnitOfWork                     @ react-dom.development.js:22185
workLoopSync                          @ react-dom.development.js:22161
performSyncWorkOnRoot                 @ react-dom.development.js:21787
(anonymous)                           @ react-dom.development.js:11111
unstable_runWithPriority              @ scheduler.development.js:653
runWithPriority$1                     @ react-dom.development.js:11061
flushSyncCallbackQueueImpl            @ react-dom.development.js:11106
flushSyncCallbackQueue                @ react-dom.development.js:11094
batchedUpdates$1                      @ react-dom.development.js:21893
notify                                @ Subscription.js:19
notifyNestedSubs                      @ Subscription.js:92
handleChangeWrapper                   @ Subscription.js:97
dispatch                              @ redux.js:222
e                                     @ VM64:1
(anonymous)                           @ effects.ts:11
(anonymous)                           @ write-middleware.ts:14
(anonymous)                           @ index.js:11
(anonymous)                           @ plugins.ts:538
(anonymous)                           @ plugins.ts:540
(anonymous)                           @ index.js:11
dispatch                              @ redux.js:638
effect                                @ ui.ts:60
(anonymous)                           @ effects.ts:13
(anonymous)                           @ write-middleware.ts:14
(anonymous)                           @ index.js:11
(anonymous)                           @ plugins.ts:538
(anonymous)                           @ plugins.ts:540
(anonymous)                           @ index.js:11
dispatch                              @ redux.js:638
(anonymous)                           @ ui.ts:54
(anonymous)                           @ index.js:8
dispatch                              @ VM64:1
(anonymous)                           @ index.tsx:162
emit                                  @ events.js:210
(anonymous)                           @ rpc.ts:31
emit                                  @ events.js:210
onMessage                             @ init.ts:50

@gaearon त्वरित प्रतिक्रिया की सराहना करते हैं। मैं कोडसैंडबॉक्स (यह चुनौतीपूर्ण है) में एक उदाहरण बनाने का एक तरीका समझूंगा, लेकिन इस बीच, यह मेरा पूरा स्टैक ट्रेस है

मेरे कस्टम हुक को इंगित करने वाली रेखा यह है: https://gist.github.com/suhanw/bcc2688bba131df8301dae073977654f#file -stack-trace-L144

यह बहुत अच्छा होगा यदि आप एक नज़र डाल सकते हैं और मुझे बता सकते हैं कि मेरे कस्टम हुक से पहले/बाद में स्टैक ट्रेस में कुछ भी है कि मुझे आगे की जांच करनी चाहिए। धन्यवाद!

@LabhanshAgrawal आपके स्टैक में, UNSAFE_componentWillReceiveProps कुछ fitResize UNSAFE_componentWillReceiveProps कॉल करता है जो एक Redux क्रिया भेजता है, जो बदले में घटकों के एक समूह को अपडेट करता है। इसलिए समस्या है। तो हाँ, इसे बदलकर componentDidUpdate काम करता है।

@suhanw आपके स्टैक में, ModuleImpressionTracker नामक कुछ कंस्ट्रक्टर के दौरान Redux क्रिया को प्रेषित करता प्रतीत होता है। कंस्ट्रक्टर्स के साइड इफेक्ट नहीं होने चाहिए। मुझे लगता है कि यह समस्या का कारण है, आपका हुक नहीं।

मैं देखता हूं, इसलिए मैं इससे दूर ले जाता हूं कि UNSAFE_componentWillReceiveProps को प्रतिपादन के रूप में गिना जाता है लेकिन componentDidUpdate नहीं है।
क्या आप इस पर कुछ स्पष्ट कर सकते हैं कि कार्यात्मक घटकों और हुक सेटस्टेट करने के साथ एक मुद्दा है, इसे ऊपर की चर्चा से स्पष्ट रूप से नहीं मिल सका।
क्षमा करें अगर सवाल थोड़ा मूर्खतापूर्ण है या मेरा लेना गलत है, तो मैं इसके लिए थोड़ा नया हूं।

@LabhanshAgrawal

क्या आप इस पर कुछ स्पष्ट कर सकते हैं कि कार्यात्मक घटकों और हुक सेटस्टेट करने के साथ एक मुद्दा है, इसे ऊपर की चर्चा से स्पष्ट रूप से नहीं मिल सका।

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

अभी भी ऐसा लगता है कि बहुत सारे स्टैक ट्रेस चिपकाए जा रहे हैं, और वास्तविक समस्या के कई वास्तविक रिप्रोज़ प्रकार की परवाह किए बिना नहीं हैं।

मुझे लगता है कि urql लिए @gaearon का इरादा है तो क्या होता है:

• हमने अपना <Todos /> माउंट किया है, जो डेटा प्राप्त करता है और इसे प्रस्तुत करता है
• पिछला सेट अप urqlClient जुड़ी एक स्ट्रीम
• हम अपना दूसरा <Todos /> प्रस्तुत करते हैं यह एक ही क्वेरी + चर संयोजन का उत्पादन करेगा इसलिए पहले चरण के <Todos /> के परिणाम को रीफ्रेश करेगा।
• use-subscription दोनों के लिए ट्रिगर किया गया है।

रेप्रो - पहली क्वेरी प्रस्तुत होने पर शीर्ष पर "ओपन" दबाएं।

हम अपडेट को कतारबद्ध कर सकते हैं लेकिन जब तक हम संदर्भ के साथ top-down रेंडर नहीं करते हैं, हम इस मुद्दे को दरकिनार नहीं कर पाएंगे जो मुझे लगता है? सिद्धांत रूप में यह इस मामले के लिए इच्छित व्यवहार है। उत्सुक है कि रिले इसके आसपास कैसे काम करता है।

संपादित करें: हम दौरान अद्यतन करने के लिए सभी ग्राहकों को लक्ष्य नहीं द्वारा urql के मामले के लिए एक समाधान मिल गया है हो सकता है getCurrentValue एक की use-subscription

https://github.com/FormidableLabs/urql/commit/3a597dd92587ef852c18139e9781e853f763e930

ठीक है तो इसमें गहराई से देख रहे हैं, मुझे लगता है कि हम मूल रूप से इरादा से अधिक मामलों (उदाहरण के लिए कक्षाओं के लिए) में चेतावनी दे रहे हैं। हम उनमें से कुछ को चुप कराने पर गौर करेंगे।

@JoviDeCroock यह उदाहरण बहुत उपयोगी नहीं है क्योंकि मुझे नहीं पता कि urql क्या करता है। :-) यदि आप किसी पैटर्न पर फीडबैक चाहते हैं, तो क्या आप उस पैटर्न को अलग-अलग प्रदर्शित करने वाला सैंडबॉक्स तैयार कर सकते हैं?

@JoviDeCroock हां, getCurrentValue निश्चित रूप से साइड इफेक्ट के लिए अभिप्रेत नहीं है । हमने सोचा कि नाम उसके बारे में बहुत स्पष्ट है।

मुझे एक समस्या थी जहां एक कस्टम हुक के रूट स्कोप के अंदर एक रेडक्स एक्शन भेजते समय मुझे यह चेतावनी मिल रही थी।

function useCustomHook() {
   const dispatch = useDispatch()
   const value = useSomeOtherHook()
   dispatch(action(value))
}

मैंने प्रेषण को useEffect में लपेटकर इसे ठीक किया।

@Glinkis परवाह किए बिना एक खराब पैटर्न की तरह लगता है। जब भी कोई घटक प्रस्तुत किया जाता है तो आप पूरे पेड़ को क्यों सूचित करना चाहेंगे?

@gaearon हाँ, जिस समस्या को हम हल करने का प्रयास कर रहे थे, उसे यहाँ बेहतर ढंग से समझाया गया

@Glinkis परवाह किए बिना एक खराब पैटर्न की तरह लगता है। जब भी कोई घटक प्रस्तुत किया जाता है तो आप पूरे पेड़ को क्यों सूचित करना चाहेंगे?

मुझे अपने रूट के लिए आईडी के साथ अपनी रेडक्स स्थिति को समन्वयित रखने की आवश्यकता है, इसलिए जब मेरा मार्ग बदलता है तो मैं यह अपडेट भेजता हूं।

मुझे पता है कि यह उप-इष्टतम हो सकता है, लेकिन मुझे अपने चयनकर्ताओं के अंदर रूटिंग डेटा तक पहुंचने का कोई अन्य तरीका नहीं मिला है।

@Glinkis मार्ग डेटा कहाँ से आ रहा है?

@JoviDeCroock मुझे लगता है कि उस पैटर्न के लिए हमारी नवीनतम सिफारिश एक कस्टम अनुसूचित कचरा संग्रह पास है।

@Glinkis मार्ग डेटा कहाँ से आ रहा है?

यकीन नहीं होता कि यह मैं इस चर्चा से संबंधित हूं, लेकिन यह मेरा हुक है।

export function useOpenFolder() {
  const dispatch = useDispatch()
  const match = useRouteMatch('/:workspace/(super|settings)?/:type?/:id?/(item)?/:item?')
  const { id, item } = match?.params || {}

  useEffect(() => {
    dispatch(
      openFolder({
        id: id || '',
        item: item || '',
      })
    )
  }, [dispatch, item, id])
}

मैं बाद में चयनकर्ताओं के लिए इस राज्य का उपयोग करता हूं जैसे:

export const getActiveItem = createSelector(
  [getActiveFolderItem, getItems],
  (activeItem, items) => items.all[activeItem]
)

@Glinkis हाँ शायद इसे यहाँ लपेटें लेकिन मेरा सुझाव मूल घटक में useRouteMatch पढ़ना होगा, आईडी को एक प्रोप के रूप में पास करना होगा, और फिर चयनकर्ता में प्रोप को सामान्य रूप से पढ़ना होगा। (मैं वास्तव में नहीं जानता कि यह इन दिनों Redux में कैसे किया जाता है लेकिन कोई रास्ता होना चाहिए।)

मैं देखता हूं, इसलिए मैं इससे दूर ले जाता हूं कि UNSAFE_componentWillReceiveProps को प्रतिपादन के रूप में गिना जाता है लेकिन componentDidUpdate नहीं है।

@LabhanshAgrawal यह सही है। कुछ पृष्ठभूमि स्पष्टीकरण यहाँ :

वैचारिक रूप से, रिएक्ट दो चरणों में काम करता है:

• रेंडर चरण निर्धारित करता है कि डीओएम के लिए कौन से परिवर्तन किए जाने की आवश्यकता है। इस चरण के दौरान, रिएक्ट render कॉल करता है और फिर परिणाम की तुलना पिछले रेंडर से करता है।
• प्रतिबद्ध चरण तब होता है जब प्रतिक्रिया कोई परिवर्तन लागू करती है। (रिएक्ट डोम के मामले में, यह तब होता है जब रिएक्ट डोम नोड्स को सम्मिलित करता है, अपडेट करता है और हटाता है।) रिएक्ट इस चरण के दौरान componentDidMount और componentDidUpdate जैसे जीवनचक्र को भी कॉल करता है।

प्रतिबद्ध चरण आमतौर पर बहुत तेज़ होता है, लेकिन प्रतिपादन धीमा हो सकता है। इस कारण से, आगामी समवर्ती मोड (जो अभी तक डिफ़ॉल्ट रूप से सक्षम नहीं है) ब्राउज़र को अवरुद्ध करने से बचने के लिए रेंडरिंग कार्य को टुकड़ों में तोड़ देता है, कार्य को रोक देता है और फिर से शुरू कर देता है। इसका मतलब यह है कि रिएक्ट करने से पहले एक से अधिक बार रेंडर फेज जीवनचक्र को लागू कर सकता है, या यह बिना किसी त्रुटि के (त्रुटि या उच्च प्राथमिकता वाले रुकावट के कारण) उन्हें आमंत्रित कर सकता है।

रेंडर चरण जीवनचक्र में निम्न वर्ग घटक विधियाँ शामिल हैं:

• constructor
• componentWillMount (या UNSAFE_componentWillMount )
• componentWillReceiveProps (या UNSAFE_componentWillReceiveProps )
• componentWillUpdate (या UNSAFE_componentWillUpdate )
• getDerivedStateFromProps
• shouldComponentUpdate
• render
• setState अद्यतनकर्ता कार्य (पहला तर्क)

चूंकि उपरोक्त विधियों को एक से अधिक बार कहा जा सकता है, इसलिए यह महत्वपूर्ण है कि उनमें दुष्प्रभाव न हों। इस नियम को अनदेखा करने से कई तरह की समस्याएं हो सकती हैं, जिनमें मेमोरी लीक और अमान्य एप्लिकेशन स्थिति शामिल है। दुर्भाग्य से, इन समस्याओं का पता लगाना मुश्किल हो सकता है क्योंकि वे अक्सर गैर-नियतात्मक हो सकते हैं।

ठीक है तो इसमें गहराई से देख रहे हैं, मुझे लगता है कि हम मूल रूप से इरादा से अधिक मामलों (उदाहरण के लिए कक्षाओं के लिए) में चेतावनी दे रहे हैं। हम उनमें से कुछ को चुप कराने पर गौर करेंगे।

मुझे लगता है कि भले ही यह इरादा से अधिक हो, मेरी राय में यह एक अच्छी बात है क्योंकि यह कक्षाओं का उपयोग करके हमारी परियोजनाओं को बेहतर बनाने में मदद करता है।

यह स्व-व्याख्यात्मक त्रुटि संदेश "किसी भिन्न घटक के फ़ंक्शन बॉडी के अंदर से एक घटक को अद्यतन नहीं कर सकता"

इसका मतलब है कि घटक को कॉल करने के बजाय फ़ंक्शन के रूप में निष्पादित करें।

इस तरह उदाहरण:

const App = () => {  
  const fetchRecords = () => { 
    return <div>Loading..</div>;
  };  
  return fetchRecords() // and not like <FetchRecords /> unless it is functional component.
};
export default App;

@rpateld मुझे नहीं लगता कि आप जो उदाहरण दिखा रहे हैं वह इस चेतावनी से संबंधित है।

https://github.com/facebook/react/pull/18330 उन मामलों को हल करेगा जिन्हें हमने फायरिंग शुरू करने का इरादा नहीं किया था।

मैं react@experimental + react-redux + redux साथ भी इस मुद्दे का सामना कर रहा हूं।

कोड इस तरह दिखता है:

import React, { Suspense } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import PropTypes from 'prop-types'
import { userActions, cabinetActions, tokensActions } from '../../actions'
import { CircularProgress } from '@material-ui/core'
import { api } from './api'

const Cabinet = ({ resource }) => {
    resource.read()
    return <h1>cabinet</h1>
}

Cabinet.propTypes = {
    resource: PropTypes.shape({
        read: PropTypes.func
    })
}

const CabinetPage = ({
    failedToLoad,
    tokensRefreshFailed,
    logout,
    loadCabinet,
    clearTokens,
    clearCabinet
}) => {
    if (tokensRefreshFailed || failedToLoad) {
        clearTokens()
        clearCabinet()
        logout()
        return <Redirect to='/login' />
    }

    return (
        <Suspense fallback={<CircularProgress />}>
            <Cabinet resource={loadCabinet()} />
        </Suspense>
    )
}

CabinetPage.propTypes = {
    loadCabinet: PropTypes.func,
    failedToLoad: PropTypes.bool,
    tokensRefreshFailed: PropTypes.bool,
    logout: PropTypes.func,
    clearTokens: PropTypes.func,
    clearCabinet: PropTypes.func
}

const mapStateToProps = ({
    alert,
    tokens: { tokensRefreshFailed },
    cabinet: { failedToLoad }
}) => ({
    alert,
    tokensRefreshFailed,
    failedToLoad
})

const mapDispatchToProps = dispatch =>
    bindActionCreators(
        {
            cabinetLoad: cabinetActions.load,
            logout: userActions.logoutWithoutRedirect,
            loadCabinet: api.loadCabinet,
            clearCabinet: cabinetActions.clear,
            clearTokens: tokensActions.clear
        },
        dispatch
    )

export default connect(mapStateToProps, mapDispatchToProps)(CabinetPage)

loadCabinet() समवर्ती दस्तावेज़ों के अनुसार तीन-चरण रेंडरिंग की एक एसिंक क्रिया को भेजता है, और read() प्रोप के साथ एक ऑब्जेक्ट देता है।
हालांकि, मुझे यहां कोई अभिभावक अपडेट नहीं दिख रहा है।

@ h0tw4t3r आप एक घटक के रेंडर के दौरान एक Redux क्रिया भेज रहे हैं। यह समर्थित नहीं है, और यही चेतावनी है। रिएक्ट राउटर के विशेषज्ञों से इस मामले (रीडायरेक्ट) को इनायत से संभालने के तरीके के बारे में पूछना सबसे अच्छा है, उस हिस्से में मदद नहीं कर सकता।

समवर्ती मोड के संबंध में, कृपया ध्यान दें कि Redux वर्तमान में सामान्य रूप से इसके साथ संगत नहीं है। इसलिए यदि आप सीएम के साथ प्रयोग कर रहे हैं तो आप इससे बचना चाहेंगे।

इस सूत्र पर छोटा अपडेट

हम जल्द ही रिएक्ट का एक पैच जारी करने जा रहे हैं जो कक्षाओं के लिए इस चेतावनी की अधिक फायरिंग को ठीक करता है। इसलिए यदि आप इसका अनुभव करते हैं, तो कुछ दिनों तक प्रतीक्षा करने पर विचार करें और फिर 16.13.1 के समाप्त होने पर प्रयास करें।

यदि आप कारणों की तलाश करते रहना चाहते हैं, तो मुझे आशा है कि https://github.com/facebook/react/issues/18178#issuecomment -595846312 बताता है कि कैसे।

मुझे यह बहुत अजीब लगता है कि एक ही तर्क जब एक वर्ग घटक में उपयोग किया जाता है तो कोई चेतावनी नहीं देता है जबकि कार्यात्मक (हुक) करता है:

कार्यात्मक घटक (हुक):

import React, { Component } from "react"
import SortableTree from "react-sortable-tree"
import "react-sortable-tree/style.css"

const data = [
  {
    title: "Windows 10",
    subtitle: "running",
    children: [
      {
        title: "Ubuntu 12",
        subtitle: "halted",
        children: [
          {
            title: "Debian",
            subtitle: "gone"
          }
        ]
      },
      {
        title: "Centos 8",
        subtitle: "hardening"
      },
      {
        title: "Suse",
        subtitle: "license"
      }
    ]
  }
]

const nodeInfo = row => console.log(row)

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      searchString: "",
      searchFocusIndex: 0,
      searchFoundCount: null,
      treeData: data
    }
  }

  render() {
    const { searchString, searchFocusIndex, searchFoundCount } = this.state

    const customSearchMethod = ({ node, searchQuery }) =>
      searchQuery &&
      ((node.title &&
        node.title.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1) ||
        (node.subtitle &&
          node.subtitle.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1))

    const selectPrevMatch = () =>
      this.setState({
        searchFocusIndex:
          searchFocusIndex !== null
            ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount
            : searchFoundCount - 1
      })

    const selectNextMatch = () =>
      this.setState({
        searchFocusIndex:
          searchFocusIndex !== null
            ? (searchFocusIndex + 1) % searchFoundCount
            : 0
      })

    return (
      <div>
        <h2>Find the needle!</h2>
        <form
          style={{ display: "inline-block" }}
          onSubmit={event => {
            event.preventDefault()
          }}
        >
          <input
            id="find-box"
            type="text"
            placeholder="Search..."
            style={{ fontSize: "1rem" }}
            value={searchString}
            onChange={event =>
              this.setState({ searchString: event.target.value })
            }
          />
          &nbsp;
          <button
            type="button"
            disabled={!searchFoundCount}
            onClick={selectPrevMatch}
          >
            &lt;
          </button>
          &nbsp;
          <button
            type="submit"
            disabled={!searchFoundCount}
            onClick={selectNextMatch}
          >
            &gt;
          </button>
          &nbsp;
          <span>
            &nbsp;
            {searchFoundCount > 0 ? searchFocusIndex + 1 : 0}
            &nbsp;/&nbsp;
            {searchFoundCount || 0}
          </span>
        </form>

        <div style={{ height: 300 }}>
          <SortableTree
            treeData={this.state.treeData}
            onChange={treeData => this.setState({ treeData })}
            searchMethod={customSearchMethod}
            searchQuery={searchString}
            searchFocusOffset={searchFocusIndex}
            searchFinishCallback={matches =>
              this.setState({
                searchFoundCount: matches.length,
                searchFocusIndex:
                  matches.length > 0 ? searchFocusIndex % matches.length : 0
              })
            }
            generateNodeProps={row => {
              return {
                title: row.node.title,
                subtitle: (
                  <div style={{ lineHeight: "2em" }}>{row.node.subtitle}</div>
                ),
                buttons: [
                  <button
                    type="button"
                    className="btn btn-outline-success"
                    style={{
                      verticalAlign: "middle"
                    }}
                    onClick={() => nodeInfo(row)}
                  >
                    ℹ
                  </button>
                ]
              }
            }}
          />
        </div>
      </div>
    )
  }
}

वर्ग घटक:

import React from "react";
import SortableTree from "react-sortable-tree";
import "react-sortable-tree/style.css";

const data = [
  {
    title: "Windows 10",
    subtitle: "running",
    children: [
      {
        title: "Ubuntu 12",
        subtitle: "halted",
        children: [
          {
            title: "Debian",
            subtitle: "gone"
          }
        ]
      },
      {
        title: "Centos 8",
        subtitle: "hardening"
      },
      {
        title: "Suse",
        subtitle: "license"
      }
    ]
  }
];

const nodeInfo = row => console.log(row);

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

    this.state = {
      searchString: "",
      searchFocusIndex: 0,
      searchFoundCount: null,
      treeData: data
    };
  }

  render() {
    const { searchString, searchFocusIndex, searchFoundCount } = this.state;

    const customSearchMethod = ({ node, searchQuery }) =>
      searchQuery &&
      ((node.title &&
        node.title.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1) ||
        (node.subtitle &&
          node.subtitle.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1));

    const selectPrevMatch = () =>
      this.setState({
        searchFocusIndex:
          searchFocusIndex !== null
            ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount
            : searchFoundCount - 1
      });

    const selectNextMatch = () =>
      this.setState({
        searchFocusIndex:
          searchFocusIndex !== null
            ? (searchFocusIndex + 1) % searchFoundCount
            : 0
      });

    return (
      <div>
        <h2>Find the needle!</h2>
        <form
          style={{ display: "inline-block" }}
          onSubmit={event => {
            event.preventDefault();
          }}
        >
          <input
            id="find-box"
            type="text"
            placeholder="Search..."
            style={{ fontSize: "1rem" }}
            value={searchString}
            onChange={event =>
              this.setState({ searchString: event.target.value })
            }
          />
          &nbsp;
          <button
            type="button"
            disabled={!searchFoundCount}
            onClick={selectPrevMatch}
          >
            &lt;
          </button>
          &nbsp;
          <button
            type="submit"
            disabled={!searchFoundCount}
            onClick={selectNextMatch}
          >
            &gt;
          </button>
          &nbsp;
          <span>
            &nbsp;
            {searchFoundCount > 0 ? searchFocusIndex + 1 : 0}
            &nbsp;/&nbsp;
            {searchFoundCount || 0}
          </span>
        </form>

        <div style={{ height: 300 }}>
          <SortableTree
            treeData={this.state.treeData}
            onChange={treeData => this.setState({ treeData })}
            searchMethod={customSearchMethod}
            searchQuery={searchString}
            searchFocusOffset={searchFocusIndex}
            searchFinishCallback={matches =>
              this.setState({
                searchFoundCount: matches.length,
                searchFocusIndex:
                  matches.length > 0 ? searchFocusIndex % matches.length : 0
              })
            }
            generateNodeProps={row => {
              return {
                title: row.node.title,
                subtitle: (
                  <div style={{ lineHeight: "2em" }}>{row.node.subtitle}</div>
                ),
                buttons: [
                  <button
                    type="button"
                    className="btn btn-outline-success"
                    style={{
                      verticalAlign: "middle"
                    }}
                    onClick={() => nodeInfo(row)}
                  >
                    ℹ
                  </button>
                ]
              };
            }}
          />
        </div>
      </div>
    );
  }
}

@radulle यह अपने आप में एक बहुत ही उपयोगी उदाहरण नहीं है। मैंने इसे कोडसैंडबॉक्स में डालने की कोशिश की लेकिन यह काम नहीं करता है: https://codesandbox.io/s/clever-taussig-9xixs। क्या आप एक उदाहरण तैयार कर सकते हैं जिसे हम आजमा सकते हैं?

@gaearon मैं एक कोडसैंडबॉक्स बनाना चाहता था लेकिन पुस्तकालय के नवीनतम संस्करण में इसके साथ कुछ समस्याएं हैं। पुराने संस्करणों में त्रुटि नहीं डाली गई है। फिलहाल ऐसा लगता है कि इसे पुन: पेश करने का एकमात्र तरीका स्थानीय रूप से क्रिएट रिएक्ट ऐप में इसे स्पिन करना है :(

@radulle मैं कौन सा संस्करण आज़मा सकता हूं जो कोडसैंडबॉक्स पर काम करेगा?

@gaearon 2.6.2 इस सेटअप के साथ त्रुटि/चेतावनी काम करता है और फेंकता है:

तो उसी सेटअप के लिए:
कार्यात्मक घटक: त्रुटियां/चेतावनी
कक्षा घटक: कोई त्रुटि/चेतावनी नहीं
शायद मुझे कुछ याद आ रहा है और वे समकक्ष नहीं हैं।

हाँ, यह उन मामलों में से एक है जिसका मैंने https://github.com/facebook/react/issues/18178#issuecomment -600369392 में उल्लेख किया है। हम इस मामले में चेतावनी को म्यूट कर देंगे। चेतावनी अपने आप में वैध है और जैसा कि आप ठीक ही कहते हैं, वैचारिक रूप से यह कक्षाओं में भी एक समस्या है। हालांकि, विसंगति का कोई मतलब नहीं है, इसलिए हम इसे अभी के लिए दोनों मामलों के लिए म्यूट कर देंगे जब यह एक वर्ग से आ रहा

मेरा मानना ​​​​है कि रेंडर फ़ंक्शन से राज्य अपडेट को फायर करने के लिए एक वैध उपयोग केस है, न कि प्रभाव से, और वह निष्पादन आदेश को संरक्षित करना है।

एक व्यावहारिक उदाहरण के साथ स्पष्ट करने के लिए: हमारे ऐप में, हमारे पास ब्रेडक्रंब के प्रबंधन के लिए एक अजीबोगरीब प्रणाली है।

• हमारे पास एक वैश्विक संदर्भ है जिसमें सभी ब्रेडक्रंब हैं

• हमारे पास एक हुक है जो हमें इस संदर्भ में ब्रेडक्रंब जोड़ने की अनुमति देता है, जैसे:

  const addBreadcrumb = useAddBreadcrumb();
  addBreadcrumb(<Breadcrumb>{item.name}</Breadcrumb>, [item.name]);
  

• हमारे पास एक घटक है जो संदर्भ से जानकारी पढ़ता है, और सभी ब्रेडक्रंब प्रस्तुत करता है। इसलिए, जब भी हम ब्रेडक्रंब को प्रस्तुत करना चाहते हैं, तो हमें इसे बिना किसी पैरामीटर के कॉल करना होगा।

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

तो, react-router के साथ संयुक्त, हम ऐसा कुछ कर सकते हैं:

// Main/index.tsx
import { useAddBreadcrumb } from 'components/Breadcrumbs';
import React from 'react';
import Home from './Home';
import Movies from './Movies';

const Main = () => {
    const addBreadcrumb = useAddBreadcrumb();
    addBreadcrumb(<Breadcrumb to="/">Home</Breadcrumb>, []);

    return <Switch>
        <Route path="/movies">
            <Movies />
        </Route>
        <Route path="/" />
            <Home />
        </Route>
    </Switch>
}

// Movies/index.tsx
import { useAddBreadcrumb } from 'components/Breadcrumbs';
import React from 'react';
import Detail from './Detail';
import Master from './Master';

const Movies = ({ url }) => {
    const addBreadcrumb = useAddBreadcrumb();
    addBreadcrumb(<Breadcrumb to={url}>Movies</Breadcrumb>, [url]);

    return <Switch>
        <Route path="/:id">
            <Detail />
        </Route>
        <Route path="/" />
            <Master />
        </Route>
    </Switch>
}

// Movies/Detail/index.tsx
import Breadcrumbs, { useAddBreadcrumb } from 'components/Breadcrumbs';
import React from 'react';
import { useRouteMatch } from 'react-router-dom';

const MovieDetail = ({ url }) => {
    const addBreadcrumb = useAddBreadcrumb();
    const { params: { id } } = useRouteMatch<{ id: string; }>();
    const movie = useMovie(id);

    addBreadcrumb(
        <Breadcrumb to={url}>{movie?.name}</Breadcrumb>,
        [movie?.name, url]
    );

    return <div>
        <Breadcrumbs />
    </div>
}

अब, अगर हम /movies/gone-with-the-wind , तो हमारे ब्रेडक्रंब इस तरह दिखेंगे:

Home > Movies > Gone with the wind

अब, यहाँ मेरी बात है: इसे काम करने के लिए, हमें गारंटी के लिए निष्पादन आदेश की आवश्यकता है। इस मामले में, निष्पादन आदेश स्पष्ट है: पहले Main प्रस्तुत करता है, फिर यह अपने बच्चों को प्रस्तुत करता है, जिसमें Movies , और अंत में MovieDetail । इस मामले में, addBreadcrumb कॉल सही क्रम में निष्पादित की जाएगी।

अब, चैंज यह कहता है:

दुर्लभ मामले में जब आप जानबूझकर किसी अन्य घटक की स्थिति को रेंडरिंग के परिणामस्वरूप बदलना चाहते हैं, तो आप सेटस्टेट कॉल को useEffect में लपेट सकते हैं।

यह वास्तव में दुर्लभ मामलों में से एक है जहां हम जानबूझकर दूसरे घटक की स्थिति को बदलना चाहते हैं। हालांकि, अगर हम ऐसा करते हैं कि चेंजलॉग सुझाव देता है और addBreadcrumb (जो अंत में एक गौरवशाली setState ) को useEffect में लपेटता है, तो निष्पादन आदेश की अब गारंटी नहीं है। सभी तीन setStates को रेंडरिंग समाप्त होने के बाद निष्पादित किया जाएगा, जो एक दौड़ की स्थिति बनाता है, और हमारे सिस्टम को तोड़ देता है।

मुझे नहीं पता कि इस अजीबोगरीब प्रणाली को एक विरोधी पैटर्न माना जाता है या नहीं, लेकिन मेरे लिए यह समझ में आता है, और मुझे कोई आसान विकल्प नहीं मिला है।

इसलिए, निष्कर्ष निकालने के लिए, मैं इस नई चेतावनी का स्वागत करता हूं, लेकिन मुझे लगता है कि हमारे लिए इष्टतम समाधान यह होगा कि इसे दबाने का एक तरीका हो। शायद setState लिए दूसरा वैकल्पिक पैरामीटर चाल चलेगा।

@MeLlamoPablo

भाई-बहनों या माता-पिता/बच्चे रेंडर ऑर्डर के क्रम में रेंडर कॉल पर भरोसा करना बहुत नाजुक लगता है। प्रतिक्रिया वास्तव में इसकी गारंटी नहीं देता है। बच्चे अपने माता-पिता के बिना, साथ ही साथ दूसरी तरफ फिर से प्रस्तुत कर सकते हैं (और करेंगे)। यदि बच्चों को देरी से प्रस्तुत किया जाता है (उदाहरण के लिए कोड विभाजन) तो यह कोड भी टूट जाएगा। या अगर कुछ बच्चों को गतिशील रूप से डाला या हटा दिया जाता है। उल्लेख नहीं है, यह बहुत खराब प्रदर्शन है क्योंकि आपके पास बहुत सारे कैस्केडिंग रेंडर हैं।

आप जिस समस्या को हल करने का प्रयास कर रहे हैं, उसके साथ मैं सहानुभूति रखता हूं - वास्तव में आज रिएक्ट में इसका मुहावरेदार समाधान नहीं है। हमारे पास इसके बारे में कुछ विचार हैं लेकिन एक उचित समाधान के लिए बहुत अलग होने की आवश्यकता होगी। इस बीच हम इस समाधान को दृढ़ता से हतोत्साहित करते हैं।

@gaearon , आपकी अंतर्दृष्टि के लिए धन्यवाद। मेरा एक सवाल है: क्या पहले रेंडर के ऑर्डर की गारंटी है? क्योंकि हमें ठीक से काम करने के लिए बस इतना ही चाहिए (एक बार जब हम ब्रेडक्रंब के क्रम को जान लेते हैं, तो हम बाद के रेंडर के क्रम की परवाह नहीं करते हैं)।

यह मेरे लिए तार्किक लगता है कि पहले रेंडर के ऑर्डर की गारंटी है। रिएक्ट को कैसे पता चलेगा कि माता-पिता के घटक में कोई अन्य बच्चे हैं?

कैस्केडिंग रेंडरर्स के प्रदर्शन के बारे में, आप बिल्कुल सही हैं। मैं अपने सिस्टम में सुधार के तरीकों की तलाश करूंगा।

@MeLlamoPablo

मेरा एक सवाल है: क्या पहले रेंडर के ऑर्डर की गारंटी है? क्योंकि हमें ठीक से काम करने के लिए बस इतना ही चाहिए (एक बार जब हम ब्रेडक्रंब के क्रम को जान लेते हैं, तो हम बाद के रेंडर के क्रम की परवाह नहीं करते हैं)।

जोरदार नहीं। मुझे लगता है कि यह ज्यादातर रिएक्ट के वर्तमान संस्करण में काम करने के लिए होता है, लेकिन यह भविष्य में अच्छी तरह से बदल सकता है। आज भी, lazy और Suspense जैसी सुविधाओं के साथ इसकी गारंटी नहीं है।

रिएक्ट को कैसे पता चलेगा कि माता-पिता के घटक में कोई अन्य बच्चे हैं?

सहोदर आदेश की गारंटी नहीं है। माता-पिता/बच्चे के आदेश के लिए, आप सही हैं माता-पिता को पहले प्रस्तुत करना होगा; हालाँकि, रिएक्ट को बच्चे को मिलने से

यह नाजुक है।

@gaearon , फिर से धन्यवाद। यह बहुत ही प्रशंसनीय है।

शायद एक ESLint नियम होना चाहिए जो एक रेंडर बॉडी के भीतर useState म्यूटेटर को कॉल करने के खिलाफ चेतावनी देता है?

रेंडर के दौरान अपने स्वयं के घटक के सेटस्टेट को कॉल करना एक समर्थित पैटर्न है (हालांकि इसे कम से कम इस्तेमाल किया जाना चाहिए)। यह अन्य घटकों पर सेटस्टेट है जो खराब हैं। आप उनको स्थिर रूप से पहचान नहीं सकते हैं।

यह सैद्धांतिक रूप से ts-eslint का उपयोग करके किया जा सकता है, यह मानते हुए कि वे सही अपस्ट्रीम रिएक्ट प्रकारों का उपयोग कर रहे हैं, लेकिन हाँ, शायद इसके लायक से अधिक प्रयास।

मुझे नहीं लगता कि यह किसी प्रकार के प्रभाव ट्रैकिंग के बिना किया जा सकता है। जैसे ही आपके बीच में एक फंक्शन होता है, आप जानकारी खो देते हैं।

मैं react@experimental + react-redux + redux साथ भी इस मुद्दे का सामना कर रहा हूं।

कोड इस तरह दिखता है:

import React, { Suspense } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import PropTypes from 'prop-types'
import { userActions, cabinetActions, tokensActions } from '../../actions'
import { CircularProgress } from '@material-ui/core'
import { api } from './api'

const Cabinet = ({ resource }) => {
  resource.read()
  return <h1>cabinet</h1>
}

Cabinet.propTypes = {
  resource: PropTypes.shape({
      read: PropTypes.func
  })
}

const CabinetPage = ({
  failedToLoad,
  tokensRefreshFailed,
  logout,
  loadCabinet,
  clearTokens,
  clearCabinet
}) => {
  if (tokensRefreshFailed || failedToLoad) {
      clearTokens()
      clearCabinet()
      logout()
      return <Redirect to='/login' />
  }

  return (
      <Suspense fallback={<CircularProgress />}>
          <Cabinet resource={loadCabinet()} />
      </Suspense>
  )
}

CabinetPage.propTypes = {
  loadCabinet: PropTypes.func,
  failedToLoad: PropTypes.bool,
  tokensRefreshFailed: PropTypes.bool,
  logout: PropTypes.func,
  clearTokens: PropTypes.func,
  clearCabinet: PropTypes.func
}

const mapStateToProps = ({
  alert,
  tokens: { tokensRefreshFailed },
  cabinet: { failedToLoad }
}) => ({
  alert,
  tokensRefreshFailed,
  failedToLoad
})

const mapDispatchToProps = dispatch =>
  bindActionCreators(
      {
          cabinetLoad: cabinetActions.load,
          logout: userActions.logoutWithoutRedirect,
          loadCabinet: api.loadCabinet,
          clearCabinet: cabinetActions.clear,
          clearTokens: tokensActions.clear
      },
      dispatch
  )

export default connect(mapStateToProps, mapDispatchToProps)(CabinetPage)

loadCabinet() समवर्ती दस्तावेज़ों के अनुसार तीन-चरण रेंडरिंग की एक एसिंक क्रिया को भेजता है, और read() प्रोप के साथ एक ऑब्जेक्ट देता है।
हालांकि, मुझे यहां कोई अभिभावक अपडेट नहीं दिख रहा है।

किसी और के लिए यह समस्या है, मैंने इसे रेडक्स एक्शन डिस्पैचिंग को एक लौटे हुए घटक पर ले जाकर तय किया है। यहां बताया गया है कि यह अब कैसा दिखता है:

const CabinetPage = ({
    alert,
    failedToLoad,
    tokensRefreshFailed,
    logout,
    loadCabinet,
    clearTokens,
    clearCabinet,
    clearAlert
}) => (
    <Suspense fallback={<MUIBackdropProgress />}>
        {alert.message && (failedToLoad || tokensRefreshFailed) ? (
            <MUIAlertDialog
                title={alert.message}
                text={errorText}
                onClose={() => {
                    clearAlert()
                    clearCabinet()
                    clearTokens()
                    logout()
                }}
            />
        ) : (
            <Cabinet resource={loadCabinet()} />
        )}
    </Suspense>
)

मुझे यह चेतावनी पसंद है क्योंकि यह आपको सही डिज़ाइन पैटर्न चुनने के लिए बाध्य करती है। अब सब कुछ त्रुटिपूर्ण ढंग से काम करता है!

हमने 16.13.1 में उन मामलों को ठीक किया जहां चेतावनी अति-फायरिंग थी। शेष मामले वैध हैं और उन्हें ठीक करने की आवश्यकता है।

@gaearon अभी अपग्रेड हुआ और त्रुटि गायब हो गई! आपके काम के लिए धन्यवाद दोस्तों!

@gaearon धन्यवाद। आपने अभी मेरा दिन बचाया :-)

अपग्रेड करने से मेरी समस्या का समाधान नहीं हुआ, इसने मुझे मेरी समस्या का पता लगाने में मदद करने के लिए कंसोल में अधिक जानकारी दी। धन्यवाद @gaearon !

क्या होगा यदि आप एक ऐसी क्रिया भेजते हैं जो अन्य घटक को पिछली बार की तरह ही वापस करने का कारण बनती है? क्या इसे बुरा माना जाता है? मुझे लगता है कि उस मामले में यह शॉर्ट-सर्किट होगा।

मैं सिर्फ कह सकते हैं यह है कि जब तक मैं पूरी तरह इस चेतावनी के पीछे तर्क समझ में ... यह लगभग क्या प्रतिक्रिया टीम समुदाय कह दिया गया है, क्योंकि यह लगता है जैसे टीम कोड के बारे में इन महत्वपूर्ण सत्य सिखाया का एक विश्वासघात की तरह लगता है प्रतिक्रिया:

1) अपने राज्य को अपने पदानुक्रम में उतना ऊंचा रखें जितना आपको चाहिए (कोई उच्चतर नहीं), और फिर डेटा पास करें और बाल घटकों को सेट करें

2) फंक्शन कंपोनेंट्स कमाल के हैं! उस वर्ग शोर को भूल जाओ, अपना पूरा घटक एक समारोह में करें!

और अब जब लोग उन दो नियमों का पालन करते हैं, और अपने राज्य को उनके कार्य घटकों में बसाते हैं, और उन्हें उन घटकों में बुलाते हैं ... आप गलीचा खींचते हैं और "हा, लेकिन आप वास्तव में वह नहीं कर सकते जो हमने आपको बताया था करने के लिए"।

इनमें से कोई भी यहां तकनीकी जरूरतों के बारे में कुछ भी नहीं बदलता है, और मैं इस बदलाव के बारे में कुछ भी गलत या बुरा नहीं कह रहा हूं ... मुझे लगता है कि एक संदेश समस्या है, इसमें आप अच्छे स्पष्ट नियमों का संचार नहीं कर रहे हैं (जैसे दो मैंने अभी उल्लेख किया है) इस नई दुनिया में कोडिंग के लिए। यदि आप हम पर नियमों को बदलने जा रहे हैं, तो मुझे लगता है कि पहले सर्वोत्तम प्रथाओं की व्याख्या करके ऐसा करना मददगार होगा।

तो, मैं वास्तव में बस इतना पूछ रहा हूं ... मुझे लगता है कि यह अधिक आदर्श होगा यदि टीम में कोई व्यक्ति कुछ (एक लेख की तरह) लिखता है जहां वे कहते हैं "मुझे पता है कि हमने आपको पहले दो नियम दिए थे: यहां ये हैं नए नियम", और फिर डॉक्स/रिलीज़ नोट्स में हर जगह उस लेख के लिए एक लिंक जोड़ें जो इस नई चेतावनी को संदर्भित करता है (इसलिए हर कोई "डब्ल्यूटीएफ यह है?" "नए" में प्रतिक्रिया को कोड करने का उचित तरीका सीख सकता है दुनिया")।

@ माचिनघोस्ट : मुझे लगता है कि आप गलत समझ रहे हैं कि संदेश किस बारे में चेतावनी दे रहा है।

माता-पिता में स्थिति अद्यतन करने वाले बच्चों को कॉलबैक पास करने में कुछ भी गलत नहीं है। यह हमेशा ठीक रहा है।

समस्या तब होती है जब एक घटक दूसरे घटक में अद्यतन को कतारबद्ध करता है, _जबकि पहला घटक प्रतिपादन_ कर रहा है।

दूसरे शब्दों में, ऐसा न करें:

function SomeChildComponent(props) {
    props.updateSomething();
    return <div />
}

लेकिन यह ठीक है:

function SomeChildComponent(props) {
    // or make a callback click handler and call it in there
    return <button onClick={props.updateSomething}>Click Me</button>
}

और, जैसा कि डैन ने कई बार बताया है, प्रतिपादन करते समय _same_ घटक में एक अद्यतन को कतारबद्ध करना भी ठीक है:

function SomeChildComponent(props) {
  const [number, setNumber] = useState(0);

  if(props.someValue > 10 && number < 5) {
    // queue an update while rendering, equivalent to getDerivedStateFromProps
    setNumber(42);
  }

  return <div>{number}</div>
}

ठीक है, लेकिन जब आप अपने घटक को कोड कर रहे हैं तो आप इसके माता-पिता के समय के बारे में नहीं सोच रहे हैं। यह रिएक्ट घटकों की सुंदरता का हिस्सा है: एनकैप्सुलेशन।

तो फिर, मैं यह नहीं कह रहा हूं कि नई चेतावनी बिल्कुल भी खराब है, मैं कह रहा हूं इससे पहले कि हमारे पास दो नियम थे जिनका पालन कोई भी अच्छा रिएक्ट देव कर सकता था। अब एक्स शर्तों के तहत वे नियम खिड़की से बाहर जाते हैं, लेकिन केवल एक्स के तहत (जहां यह एक्स = "जैसा लगता है, जबकि मूल घटक भी अपडेट हो रहा है")।

मुझे लगता है कि "यह अब एक समस्या है!" की तरह होने के बजाय, इसे समझाने और समस्या से बचने के तरीके पर अधिक ध्यान देने की आवश्यकता है।

@ माचिनघोस्ट : आप _truly_ जो मैं यहां कह रहा हूं वह नहीं मिल रहा है।

माता-पिता/बच्चे का समय मुद्दा नहीं है।

एक फंक्शन कंपोनेंट_ को रेंडर करते समय अन्य कंपोनेंट्स को क्यूइंग स्टेट अपडेट _ मुद्दा है।

परिभाषा के अनुसार इसे माता-पिता/बच्चे (या पोते) होना चाहिए: यह राज्य सेटर को और कैसे पारित कर सकता था?

मैं यह नहीं कह रहा हूं कि यह अन्य घटक संबंधों में भी एक मुद्दा नहीं हो सकता है, लेकिन मैं विशेष रूप से लोगों के बारे में बात कर रहा हूं जो रिएक्ट की सर्वोत्तम प्रथाओं का पालन करते हैं, राज्य को बसाते हैं, और फिर यह चेतावनी प्राप्त करते हैं।

मैं बस यही बात कर रहा हूं, और मैं बस इतना कह रहा हूं, "इसे बेहतर तरीके से समझाया जा सकता है, केवल 'यहां एक नई त्रुटि है और यहां इसका अर्थ है' के बजाय अच्छी तरह से कोड करने के तरीके पर अधिक ध्यान दिया जा सकता है"।

समय। नहीं। मुद्दा।

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

फ़ंक्शन घटक के वास्तविक रेंडरिंग बॉडी के भीतर से _any_ अन्य घटक के लिए एक अद्यतन को कतारबद्ध करना अवैध है।

यही चेतावनी आपको बता रही है।

मुझे नहीं पता कि मैं इसे कैसे स्पष्ट कर सकता हूं।

समय मुद्दा नहीं है: तुम्हारा नहीं, मेरा नहीं। मेरी समस्या दस्तावेज़ीकरण, या उसके अभाव की है।

लेकिन आपने एक इंटरनेट अजनबी के साथ एक मुद्दे के धागे में युद्ध शुरू करने का फैसला किया है, बजाय इसके कि वे क्या कह रहे हैं और ... मुझे आपके साथ जुड़ना जारी रखने की कोई इच्छा नहीं है।

बात यह है कि कोई नियम नहीं बदला है। यह हमेशा गलत पैटर्न रहा है। इसे अभी हाइलाइट किया जा रहा है ताकि आप जान सकें कि आपका कोड छोटा है।

और शाब्दिक रूप से आपने जो कुछ भी कहा है वह मेरे द्वारा लिखी गई किसी भी बात से असहमत है। वास्तव में, यह लगभग वैसा ही है जैसे मैंने शुरू से ही ठीक यही बात कही है ... और मैंने इस पूरे समय के लिए केवल उन्हीं नियमों की बेहतर व्याख्या की थी, जिन्हें आप कहते हैं कि वे नहीं बदले हैं (और निश्चित रूप से) उन्होंने नहीं ... क्या बदला और "एक नई दुनिया बनाई" चेतावनी थी)।

PS आप भी यहाँ की विडम्बना को समझने में असफल होते दिख रहे हैं। अगर मुझे कुछ भी समझ में नहीं आता है, तो यह मामला बना रहा है कि दस्तावेज़ीकरण में सुधार किया जा सकता है। मुझ पर चिल्लाना कि मैं चीजों को कितनी बुरी तरह समझता हूं, केवल मेरी स्थिति को मजबूत करता है; यह जादुई रूप से दस्तावेज़ीकरण में सुधार नहीं करता है।

नमस्कार दोस्तों, थोड़ा शांत हो जाइए। मैं

@markerikson आपको कूदने की सराहना करते हैं लेकिन मुझे लगता है कि यह चर्चा थोड़ी गर्म हो रही है।

@machineghost अपनी चिंताओं को व्यक्त करने के लिए धन्यवाद। मुझे पता है कि जब नई चेतावनियां पैटर्न के लिए पॉप अप होती हैं तो यह परेशान होता है जो पहले सहज लग सकता था।

मैं सहमत हूं कि इस चेतावनी के लिए कुछ पूर्व संदर्भ की आवश्यकता है। अनिवार्य रूप से, आपको कक्षा युग से दो चीजें जानने की जरूरत है:

• कि आपको रेंडर के दौरान सेटस्टेट नहीं करना चाहिए। इस बारे में कक्षाओं ने हमेशा चेतावनी दी है।

• वह फंक्शन कंपोनेंट बॉडी अनिवार्य रूप से क्लास कंपोनेंट रेंडर मेथड जैसा ही है।

यह वास्तव में हमारी चूक है कि फ़ंक्शन घटक निकाय के दौरान किसी अन्य घटक पर सेटस्टेट ने पहले चेतावनी नहीं दी थी। आप ऊपर के दो बिंदुओं से यह अनुमान लगा सकते हैं कि यह एक खराब पैटर्न है लेकिन यह कहना उचित है कि कोई इसे महसूस नहीं कर सका। असुविधा के लिए हमें खेद है.

यदि आपको लगता है कि डॉक्स में कोई विशेष स्थान है जहाँ इसका उल्लेख किया जाना चाहिए, तो कृपया डॉक्स रिपॉजिटरी पर एक मुद्दा उठाएं। हम हुक के आस-पास होने वाले दस्तावेज़ों के पुनर्लेखन की योजना बना रहे हैं ताकि कुछ ऐसा हो जिसे हम ध्यान में रख सकें। धन्यवाद!

मेरा किसी भी तरह से किसी के बारे में बुरा महसूस करने का कोई मतलब नहीं है, और मैं आपकी माफी को स्वीकार करने से इनकार करता हूं;) हुक प्रतिभाशाली हैं, और आप उनका आविष्कार करने के लिए प्रतिभाशाली हैं। और कोई भी इंजीनियर जो हर परिणाम की पूरी तरह से कल्पना नहीं करने के लिए दूसरे इंजीनियर को दोष देता है ... एक झटका है।

मैं केवल संवाद करने की कोशिश कर रहा हूं, वर्तमान में जब मुझे यह चेतावनी मिली, तो मैंने वही किया जो हर कोई करता है: मैंने इसे गुगल किया। फिर मुझे एक पेज मिला जिसमें लिखा था, "हमें यह नई चेतावनी मिली है"।

मुझे लगता है कि यह बेहतर होता (और अभी भी बेहतर हो सकता है) अगर उस घोषणा में एक लिंक हो सकता है (हो सकता है), या इसी तरह के स्थान जो किसी को गुगलिंग द्वारा मिल सकते हैं, "यहाँ" की कुछ "उच्च स्तरीय चर्चा" के लिए हमने यह त्रुटि क्यों पेश की और यहां बताया गया है कि आप कैसे एक शानदार रिएक्ट देव हो सकते हैं और कुछ बुनियादी दिशानिर्देशों का पालन करें ताकि आप कभी भी इसमें भाग न लें।"

लेकिन फिर से, हुक कमाल के हैं, रिएक्ट टीम कमाल की है, और यहां तक ​​​​कि यह नई चेतावनी भी कमाल की है (मुझे यकीन है कि यह उस त्रुटि की खोज करने से नरक को हरा देता है जिससे वह बचाव करने की कोशिश कर रहा है)। अगर किसी को किसी के लिए खेद है, तो मैं उसके साथ नेतृत्व नहीं करने के लिए हूं।

ज़रूर, कोई कठिन भावना नहीं। "क्यों" का उत्तर "यदि एक घटक रेंडरिंग के दौरान अन्य घटकों पर अपडेट ट्रिगर करता है, तो आपके ऐप के डेटा प्रवाह का पता लगाना बहुत कठिन हो जाता है क्योंकि यह अब ऊपर से नीचे नहीं जाता है" से अधिक जटिल नहीं है। तो यदि आप ऐसा करते हैं तो आप प्रतिक्रिया के लाभों को दूर कर रहे हैं।

फिर, स्पष्ट करने के लिए, यह प्रति नया नहीं है - कक्षाओं में हमेशा एक ही चेतावनी होती थी। हम इसे हुक के साथ चूक गए, और गलती को सुधार रहे हैं। मुझे लगता है कि जिस तरह से आप इसे ठीक करते हैं वह मामले पर निर्भर करता है - इसलिए हम आपको सटीक निर्देश नहीं दे सकते हैं - लेकिन अगर आप एक उदाहरण साझा करते हैं तो आपको मदद करने में खुशी होती है। आम तौर पर कह रहे हैं, आप इसे उसी तरह ठीक करेंगे जैसे आप हमेशा मौजूद संबंधित वर्ग चेतावनी को कैसे ठीक करेंगे।

उम्मीद है कि इससे कुछ मदद मिलेगी!

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

केस और पॉइंट कंपोनेंटडिडमाउंट और अनमाउंट होने के नाते, पहले हमें फ़ंक्शन घटकों का उपयोग करने के लिए कहा जाता है, फिर एक खाली सरणी के साथ उपयोग प्रभाव का उपयोग करें, फिर हमें बताया गया कि यह अच्छा नहीं है, अब हमें यह त्रुटि संदेश गड़बड़ है। मुझे नहीं पता, मैं प्रतिक्रिया में जाने वाली सभी कड़ी मेहनत की सराहना करता हूं लेकिन हमें वास्तव में दस्तावेज़ीकरण और सर्वोत्तम प्रथाओं में और अधिक प्रयास करने की आवश्यकता है।

मैं इतने लंबे समय से फंक्शन बैंडवागन पर हूं (रीकॉम्पोज के साथ कक्षाओं से बचने की कोशिश कर रहा हूं और यहां तक ​​​​कि हुक से पहले भी) कि मुझे उन क्लास चेतावनियों को भी याद नहीं है।

और जब मैं आपकी प्रतिक्रिया की सराहना करता हूं, तो मैं मुख्य रूप से "अंगूठे के नियम", दिशानिर्देशों, सर्वोत्तम प्रथाओं आदि की उम्मीद कर रहा था। सामान जैसे "अपने राज्य को उतना ऊंचा रखें जितना इसका उपयोग करने वाले सभी घटकों को कवर करने के लिए आवश्यक हो, लेकिन कोई उच्चतर नहीं "या" पास राज्य नियंत्रण पैटर्न के व्युत्क्रम का उपयोग करके बाल घटकों के लिए बसता है"।

हो सकता है कि यहां कोई न हो , लेकिन

या हो सकता है कि रविवार की देर हो गई हो, मैं पूरे दिन एक निजी परियोजना पर काम कर रहा हूं, और मेरा दिमाग अभी बहुत तला हुआ है और कुछ कठिन को सरल बना रहा है। किसी भी तरह, अगर मेरे पास दिशानिर्देशों के लिए कोई और सुझाव हैं, तो मैं वापस पोस्ट करूंगा, लेकिन अन्यथा मैं निश्चित रूप से नहीं चाहता कि कोई और इस पर अपनी रविवार की रात बिताए।

फिर भी धन्यवाद!

मुझे लगता है कि हम उस बिंदु पर पहुंच रहे हैं जहां यह धागा अपनी उपयोगिता को पार कर चुका है।

केस और पॉइंट कंपोनेंटडिडमाउंट और अनमाउंट होने के नाते, पहले हमें फ़ंक्शन घटकों का उपयोग करने के लिए कहा जाता है, फिर एक खाली सरणी के साथ उपयोग प्रभाव का उपयोग करें, फिर हमें बताया गया कि यह अच्छा नहीं है, अब हमें यह त्रुटि संदेश गड़बड़ है।

मुझे खेद है कि हमारे दस्तावेज़ीकरण ने आपकी मदद नहीं की, लेकिन यह कहना बहुत कठिन है कि आप किन विशिष्ट समस्याओं का सामना कर रहे हैं। यह दुर्भाग्य से बहुत अस्पष्ट है और हमने जो कहने की कोशिश की है उसका विरूपण है। टूटे हुए टेलीफोन के खेल की तरह। यदि आपको कोई विशिष्ट समस्या है तो कृपया एक नया मुद्दा दर्ज करें और उसका अधिक विस्तार से वर्णन करने का प्रयास करें। यदि आप अधिक विशिष्ट हो सकते हैं तो हम आपकी सहायता करने का प्रयास करेंगे।

और जब मैं आपकी प्रतिक्रिया की सराहना करता हूं, तो मैं मुख्य रूप से "अंगूठे के नियम", दिशानिर्देश, सर्वोत्तम प्रथाओं आदि की उम्मीद कर रहा था

अंगूठे का नियम हमेशा "रेंडरिंग के दौरान साइड इफेक्ट न करें" रहा है। एक शुद्ध गणना के रूप में प्रतिपादन के बारे में सोचें। साइड इफेक्ट एक अलग जगह पर जाते हैं (कक्षाओं में जीवनचक्र के तरीके, या फ़ंक्शन घटकों में उपयोग करें)। इसमें ज्यादा कुछ नहीं है।

"यदि कार्यात्मक घटक ए राज्य बदलता है, तो उसे बाल घटक बी को प्रस्तुत नहीं करना चाहिए कि यह एक राज्य सेटर को पास करता है (इसे सही या कुछ वापस करना चाहिए), क्योंकि तब यदि बाल घटक प्रस्तुत करता है और राज्य बदलता है तो आपको समस्याएं होंगी"।

मुझे लगता है कि यहां अभी भी कुछ गलतफहमी है। स्टेट सेटर्स को चाइल्ड कंपोनेंट में पास करना बिल्कुल ठीक है। हमेशा ठीक रहा है, और हमेशा रहेगा।

समस्या प्रतिपादन करते समय उन्हें कॉल करने में है । यह आम तौर पर पूरी तरह से अनावश्यक होना चाहिए। मेरे लिए यह अनुमान लगाना कठिन है कि आप बिना ठोस उदाहरण के ऐसा क्यों कर रहे हैं। इसलिए मदद करना मुश्किल है।

इन दोनों वार्तालापों में सामान्य विषय यह है कि हम मंडलियों में जा रहे हैं। चर्चा मेटा में बदल गई है, और विशिष्ट मामलों के बारे में बात करने के बजाय हम अस्पष्ट सामान्यताओं पर चर्चा कर रहे हैं। हो सकता है कि हम एक-दूसरे को गलत समझें, लेकिन ठोस उदाहरणों की कमी इस गलतफहमी को दूर करना असंभव बना रही है।

इस कारण से मैं इस धागे को बंद करने जा रहा हूं। मैं यहां हर किसी के इनपुट की बहुत सराहना करता हूं, और यदि आप इस चेतावनी को ठीक करने के लिए संघर्ष करते हैं तो हमें आपसे अधिक सुनना अच्छा लगेगा। सहायता प्राप्त करने का तरीका न्यूनतम पुनरुत्पादन उदाहरण के साथ समस्या दर्ज करना है। तब हम आपकी ठोस समस्या पर चर्चा कर सकते हैं और समाधान पर मंथन करने में मदद कर सकते हैं। यह शामिल सभी लोगों के लिए अधिक उत्पादक होगा, और उन दर्जनों लोगों को ईमेल भेजने से भी बच जाएगा, जिन्होंने पहले ही इस धागे पर टिप्पणी की है और सदस्यता समाप्त कर दी है। शुक्रिया!

एक छोटे से अपडेट के रूप में (सभी को पिंग करने के लिए खेद है), मैंने सुना https://github.com/final-form/react- final-form / 751#issuecomment -606212893 उन लोगों के लिए इन त्रुटियों का एक समूह हल किया जो इसका उपयोग कर रहे थे पुस्तकालय।