मैं अपने कोड में दो बार सेटस्टेट () का उपयोग कर रहा हूं। किसी छवि पर क्लिक करते समय सबसे पहले विधि निष्पादित होती है। राज्य को अद्यतन करने के बाद, मैं एक और विधि बुला रहा हूं जिसमें मैं अन्य तत्व की स्थिति निर्धारित करने के लिए अद्यतन स्थिति का उपयोग कर रहा हूं। पहले क्लिक में कोड ठीक से काम करता है। जब मैं छवि को फिर से क्लिक करता हूं तो यह काम नहीं कर रहा है।

import Heart from '../../assets/images/heart.png';
import yelloHeart from '../../assets/images/yello_heart.png';
 state = {
        heartImage: Heart,
        heartClicked: false
    }
 imageClickedHandler = () => {
        this.setState(state => ({ heartClicked: !state.heartClicked }));
        this.changeImage();

    }
 changeImage = () => {
        if (this.state.heartClicked) {
            this.setState({ heartImage: yelloHeart })
        }
    }
  <img onClick={this.imageClickedHandler} src={this.state.heartImage} alt="heart" />

दूसरे क्लिक पर मुझे उचित आउटपुट मिल रहा है। लेकिन मैं चाहता हूं कि छवि हर बार टॉगल करे।

0
Nithin B D 5 सितंबर 2019, 08:50

2 जवाब

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

मैं इस सुविधा के लिए एक राज्य का उपयोग करता हूं।


function App() {
  const [clicked, setClicked] = useState(false);

  return (
    <div className="App">
      <h1>setState example</h1>
      <img
        style={{
          height: 200,
          width: 200
        }}
        onClick={() => setClicked(clicked => !clicked)}
        src={clicked ? redHeart : heart}
        alt="heart"
      />
    </div>
  );
}

आप कोडसैंडबॉक्स में जांच सकते हैं। https://codesandbox.io/s/intelligent-worker-00v2b?fontsize= 14

-1
T J 5 सितंबर 2019, 09:56

यह एक सामान्य नुकसान है जिसका आप सामना कर रहे हैं। दस्तावेज़ों से:

setState() हमेशा घटक को तुरंत अपडेट नहीं करता है। यह बाद में अपडेट को बैच या स्थगित कर सकता है। यह setState() को संभावित नुकसान को कॉल करने के ठीक बाद this.state को पढ़ता है। इसके बजाय, कंपोनेंटडिडअपडेट या एक सेटस्टेट कॉलबैक (सेटस्टेट (अपडेटर, कॉलबैक)) का उपयोग करें, जिनमें से किसी को भी अपडेट लागू होने के बाद आग लगने की गारंटी है। यदि आपको राज्य को पिछली स्थिति के आधार पर सेट करने की आवश्यकता है, तो नीचे अद्यतनकर्ता तर्क के बारे में पढ़ें।

तो एक चीज जो आप कर सकते हैं वह है:

imageClickedHandler = () => {
    this.setState(state => ({
        heartClicked: !state.heartClicked
    }), () => { //  We used callback based version, the callback will fire once the state is set.
        this.changeImage() 
    });

} 
3
gmoniava 5 सितंबर 2019, 09:03