मुझे यह समझने में समस्या है कि कुछ मामलों में componentWillUnmount विधि को क्यों नहीं कहा जाता है, भले ही मैं जिस घटक की अपेक्षा करता हूं वह अनमाउंट है।

अधिक ठोस होने के लिए, यह उदाहरण है। आइए एक बटन और 2 बच्चों के साथ एक अभिभावक घटक पर विचार करें: Child_Odd और Child_Even। यदि बटन के क्लिकों की संख्या विषम है, तो Child_Odd "दिखाया" जाता है, अन्यथा Child_Even "दिखाया" जाता है।

मैं घटक "गायब" होने पर componentWillUnmount विधि को कॉल करने की अपेक्षा करता हूं, लेकिन इसके विपरीत ऐसा नहीं होता है। यहां केस को पुन: प्रस्तुत करने वाला एक स्टैकब्लिट्ज है (इस स्टैकब्लिट्ज में एक इसी तरह का मामला जहां componentWillUnmount विधि वास्तव में कहा जाता है)।

यह प्रासंगिक कोड है

export class ChildFlipped extends React.Component {
  render() {
    return (
      <div>
        {this.props.name} - No of clicks ({this.props.numberOfClicks})
      </div>
    );
  }
}

export class ParentFlips extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      clickCounter: 0,
    };
  }
  render() {
    return (
      <div>
        <button
          onClick={() => this.updateState()}
        >
          Click me
        </button>
        {this.state.clickCounter % 2 ? (
          <ChildFlipped
            name={"Even"}
            numberOfClicks={this.state.clickCounter}
          ></ChildFlipped>
        ) : (
          <ChildFlipped
            name={"Odd"}
            numberOfClicks={this.state.clickCounter}
          ></ChildFlipped>
        )}
      </div>
    );
  }
  updateState() {
    this.setState((prevState, _props) => ({
      clickCounter: prevState.clickCounter + 1,
    }));
  }
}
1
Picci 14 फरवरी 2021, 17:14
1
क्या इससे आपके सवाल का जवाब मिलता है? reactjs कंपोनेंटWillUnmount को कॉल नहीं किया जा रहा है
 – 
lissettdm
14 फरवरी 2021, 18:13
1
हालांकि यह उत्तर वास्तव में कुछ भी स्पष्ट नहीं करता है, यह दिखाता है कि इसे चाबियों के साथ कैसे हल किया जाए।
 – 
Oblosys
14 फरवरी 2021, 18:41

1 उत्तर

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

यह आग नहीं करता है क्योंकि घटक घुड़सवार रहता है। सुलह के संबंध में, सशर्त अभिव्यक्ति

this.state.clickCounter % 2
? <ChildFlipped name={"Even"} numberOfClicks={this.state.clickCounter}/>
: <ChildFlipped name={"Odd"} numberOfClicks={this.state.clickCounter}/>

से अप्रभेद्य है

<ChildFlipped name={this.state.clickCounter % 2? "Even" : "Odd"} 
              numberOfClicks={this.state.clickCounter}/>

चूंकि दोनों खंड समान ChildFlipped घटक को संदर्भित करते हैं। यदि आप कुंजियाँ जोड़ते हैं, तो आप उन्हें अलग करने योग्य बना सकते हैं और अनमाउंटिंग को ट्रिगर कर सकते हैं:

his.state.clickCounter % 2
? <ChildFlipped key='even' name={"Even"} numberOfClicks={this.state.clickCounter}/>
: <ChildFlipped key='odd' name={"Odd"} numberOfClicks={this.state.clickCounter}/>

जीवनचक्र विधियों के साथ प्रयोग करने के लिए मैंने एक प्रतिक्रिया जीवनचक्र विज़ुअलाइज़र बनाया (StackBlitz< /a>) जो आपके लिए उपयोगी हो सकता है।

1
Oblosys 14 फरवरी 2021, 18:09