मेरे पास एक माता-पिता React.js घटक है, एक राज्य और एक बच्चे घटक के लिए एक सेटर पास कर रहा है।

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

const useState = React.useState;

class MyComponnent extends React.Component {
  intervalID = null;

  componentDidMount() {
    console.log("MOUNTING");
    this.intervalID = setInterval(() => {
      this.props.setA({ a: this.props.a.a + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalID);
  }

  render = () => {
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: "column"
        }}
      >
        <div
          style={{
            flexDirection: "row",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            marginTop: "30px"
          }}
        >
          {this.props.a.a}
        </div>
      </div>
    );
  };
}

function App() {
  const [activeStep] = useState(0);
  const [a, setA] = useState({ a: 0 });

  // eslint-disable-next-line react/no-multi-comp

  function StepPage() {
    if (0 === 0) {
      return <MyComponnent a={a} setA={setA} />;
    } else {
      return <MyComponnent />;
    }
  }

  return (
    <div>
      <StepPage />
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
.App {
  font-family: sans-serif;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>
-1
IggY 26 सितंबर 2019, 17:39

2 जवाब

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

समस्या यह है कि आप एक रेंडर फ़ंक्शन के अंदर StepPage को परिभाषित करके अपने घटक का नया उदाहरण बना रहे हैं।

आप अपने StepPage घटक को रिफलेक्टर कर सकते हैं ताकि इसे रेंडर विधि के बाहर परिभाषित किया जा सके,

function StepPage({ setA, a}) {
  if (0 === 0) {
    return <MyComponnent a={a} setA={setA} />;
  } else {
    return <MyComponnent />;
  }
}

export default function App() {
  const [activeStep] = useState(0);
  const [a, setA] = useState({ a: 0 });

  return (
    <div>
      <StepPage a={a} setA={setA} />
    </div>
  );
}
2
felixmosh 26 सितंबर 2019, 17:48

StepPage आपके उदाहरण में हर बार App रेंडर होने पर फिर से परिभाषित होता है।

फ़ंक्शन को सामान्य रूप से रिएक्ट घटक के रूप में उपयोग करने के बजाय कॉल करना समस्या को कम करता है:

return (
  <div>
    {StepPage()}
  </div>
);
const useState = React.useState;

class MyComponnent extends React.Component {
  intervalID = null;

  componentDidMount() {
    console.log("MOUNTING");
    this.intervalID = setInterval(() => {
      this.props.setA({ a: this.props.a.a + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalID);
  }

  render = () => {
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: "column"
        }}
      >
        <div
          style={{
            flexDirection: "row",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            marginTop: "30px"
          }}
        >
          {this.props.a.a}
        </div>
      </div>
    );
  };
}

function App() {
  const [activeStep] = useState(0);
  const [a, setA] = useState({ a: 0 });

  // eslint-disable-next-line react/no-multi-comp

  function StepPage() {
    if (0 === 0) {
      return <MyComponnent a={a} setA={setA} />;
    } else {
      return <MyComponnent />;
    }
  }

  return (
    <div>
      {StepPage()}
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
.App {
  font-family: sans-serif;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>
2
Emile Bergeron 26 सितंबर 2019, 19:17