अन्य घटकों से प्रॉप्स द्वारा पारित चर का उपयोग करके घटक में चर को अद्यतन करने के लिए एक अच्छा अभ्यास क्या है? यहां मैं विभिन्न घटकों से पारित 'आईडी' के आधार पर छवि प्रदर्शित करने का प्रयास कर रहा हूं जहां मैं क्लिक ईवेंट पर आधारित आईडी पकड़ता हूं। अफसोस की बात है कि मेरा useState घटक 100% में अपडेट नहीं होता है। किसी तरह उचित सूचकांक को सही ढंग से पढ़ना संभव है, लेकिन यह छवि को ठीक से प्रदर्शित नहीं करता है।

const SwiperModal = ({ handleClose, show, membersList, curr_idx }) => {
  const showHideClassName = show ? 'modal display-block' : 'modal display-none';
  const idx = parseInt(curr_idx);
  const [index, setIndex] = useState(idx);

  return (
    <div className={showHideClassName}>
      <section className="modal-main">
        <button className="btn__close" onClick={handleClose}>
          close
        </button>
        <Gallery
          index={index}
          //index variable above is responsible for "which image is displayed from the list"
          onRequestChange={i => {
            setIndex(i);
          }}
        >
          {membersList.map((value, index) => (
            <GalleryImage objectFit="contain" src={value.image} key={index} />
          ))}
        </Gallery>
      </section>
    </div>
  );
};

क्या अन्य घटकों से पारित प्रॉप्स का उपयोग करके इस तरह के चर को अद्यतन करना एक अच्छा तरीका है? या ऐसा करने का कोई अन्य विचार है?

0
mmalak 28 अक्टूबर 2019, 21:26

1 उत्तर

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

आपको curr_idx परिवर्तन के लिए एक श्रोता की आवश्यकता है या आपका राज्य प्रॉप्स परिवर्तन पर अपडेट नहीं होगा (onClick के कारण), आप इसे useEffect हुक:

const SwiperModal = ({ handleClose, show, membersList, curr_idx }) => {
  const [index, setIndex] = useState(parseInt(curr_idx));

  useEffect(() => {
    setIndex(parseInt(curr_idx));
  }, [curr_idx]);

  return (...);
};
1
Dennis Vash 28 अक्टूबर 2019, 18:32