मेरे पास एक ऐसा कार्य है जो विशेष राज्यों को कॉल करता है लेकिन अर्ध-समान रेखाओं के साथ। यहाँ मेरा कार्य है;

DoThis(type) {
   if (type === 'a') {
      this.setState({ activeA: { display: 'block', opacity: 1 } }, () => setTimeout(() => {
         this.setState({ activeA: { opacity: 0 } }, () => setTimeout(() => {
            this.setState({ activeA: { display: 'none' } })
         }, 300))
      }, 2000));
   } else if (type === 'b') {
      this.setState({ activeB: { display: 'block', opacity: 1 } }, () => setTimeout(() => {
         this.setState({ activeB: { opacity: 0 } }, () => setTimeout(() => {
            this.setState({ activeB: { display: 'none' } })
         }, 300))
      }, 2000));
   } // ...some other active(n) conditions.
}

यह बहुत गन्दा है और मैं बस इसे भीड़भाड़ से मुक्त करना चाहता हूँ।

यह मेरा राज्य है:

this.state ={
   activeA: { display: 'none', opacity: 0 },
   activeB: { display: 'none', opacity: 0 },
   // ...some other active(n) states...
}

इस तरह के मुद्दे को हल करने का कोई तरीका?

0
DaOneRom 12 नवम्बर 2019, 11:09

1 उत्तर

कॉलबैक नरक से बचने के लिए, आप इस तरह एक साधारण कार्य जोड़ सकते हैं:

const delay = (time = 0) => new Promise(r => setTimeout(r, time));

और फिर इसे रैखिक फैशन में फिर से लिखें:

async DoThis(type) {
    let key = 'active' + type.toUpperCase();

    this.setState({[key]: {display: 'block', opacity: 1}})
    await delay(300);
    this.setState({[key]: {opacity: 0}});
    await delay(2000);
    this.setState({[key]: {display: 'none'}});
}
1
georg 12 नवम्बर 2019, 12:41