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

const A = ({children}) => {
  // [{id: 1, component: () => <div>hi</>}, {}, etc ]
  const [items, addItem] = useState([])

  return (
    <.Provider value={{items, addItem}}>
    {children}
    {items.map(item => createPortal(<Item />, topLevelDomNode))}
    </.Provider>
  )
}

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

const B = () => {
  const {data, loading, error} = useMyRequestHook(...)

  console.log('data is definitely updating!!', data) // i.e. props is definitely updating!

  return (
    <.Consumer>
    {({addItem}) => (
      <Button onClick={() => {
        addItem({
          id: 9,

          // This component renders correctly, but DOESN'T update when data is updated
          component: () => (
            <SomeComponent
              data={data} 
            />
          )
        })
       }}>
        click to add component
      </Button>
    )}
    </.Consumer>
  )
}

घटक B लॉग करता है कि डेटा काफी नियमित रूप से अपडेट हो रहा है। और जब मैं प्रदाता में राज्य के रूप में संग्रहीत items सूची में घटक जोड़ने के लिए बटन पर क्लिक करता हूं, तो यह तब प्रस्तुत करता है जैसा इसे करना चाहिए।

लेकिन items सूची के घटक डेटा गुण में परिवर्तन होने पर पुन: प्रस्तुत नहीं होते हैं, भले ही ये घटक डेटा गुण को प्रॉप्स के रूप में प्राप्त करते हैं। मैंने shouldComponentUpdate के साथ क्लास कंस्ट्रक्टर का उपयोग करने की कोशिश की है और घटक स्पष्ट रूप से नए प्रॉप्स प्राप्त नहीं कर रहा है।

ऐसा क्यों है? क्या मैं प्रतिक्रिया का पूरी तरह से दुरुपयोग कर रहा हूं?

0
Zach Smith 6 अप्रैल 2020, 19:46

1 उत्तर

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

मुझे लगता है कि इसका कारण यह है।

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

इसलिए यह कभी भी प्रोप अपडेट प्राप्त नहीं करेगा जहां से मैंने इसकी अपेक्षा की थी - जहां घटक परिभाषित किया गया था। इसके बजाय इसे प्रोप अपडेट प्राप्त होगा जहां से इसे प्रदान किया जाता है (हालांकि डेटा वैरिएबल वास्तव में इस मामले में प्रोप से नहीं आ रहा है, जो एक और समस्या है)।

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

0
Zach Smith 18 अप्रैल 2020, 08:13