React: बग: OnKeyDown ब्लॉकों में असंबंधित राज्य अद्यतन onChange और नियंत्रित घटक को तोड़ता है

को निर्मित 9 जुल॰ 2020 · 3टिप्पणियाँ · स्रोत: facebook/react

नमस्ते, मैं इनपुट नियंत्रित मोड का उपयोग करता हूं और onKeyDown और onChange इवेंट की सदस्यता लेता हूं। जब उपयोगकर्ता अंतरिक्ष में प्रवेश करेगा तो यह एक प्रभाव को ट्रिगर करेगा। हालाँकि, अंतरिक्ष स्क्रीन पर प्रदर्शित नहीं होता है। क्या यह प्रतिक्रिया पर एक बग है या क्या मैं इसके इस्तेमाल के तरीके में कुछ गड़बड़ है। लेकिन onKeyUp सदस्यता सामान्य है। यह उलझन है।

प्रतिक्रिया संस्करण: 16.13.1 और पुराना

प्रजनन करने कि प्रक्रिया

अंतरिक्ष में प्रवेश करें
इनपुट तत्व स्क्रीन पर स्थान नहीं दिखाता है

कोड उदाहरण के लिए लिंक:

import React, { useState,useEffect } from 'react'

const App = () => {
  const [count, setCount] = useState(0)
  const [value, setValue] = useState('')
  const [code, setCode] = useState('add')

  useEffect(() => {
    if (code === 'add') {
      setCount(c => c + 1)
    } else {
      setCount(c => c - 1)
    }
  }, [code, setCount])

  const keyDown = e => {
    if (e.keyCode === 32) {
      console.log('space~')
      if (code === 'add') {
        setCode('minus')
      } else {
        setCode('add')
      }
    }
  }

  const handleChange = e => {
    setValue(e.target.value)
  }

  return (
    <div>
      <div>{count}</div>
      <br />
      <input onKeyDown={keyDown} value={value} onChange={handleChange} />
    </div>
  )
}

export default App

वर्तमान व्यवहार

इनपुट तत्व अंतरिक्ष को प्राप्त नहीं कर सकता है

अपेक्षित व्यवहार

इनपुट तत्व अंतरिक्ष प्राप्त कर सकता है

DOM Unconfirmed Bug

स्रोत

GRAMMAC1

👍4

सभी 3 टिप्पणियाँ

यह onKeyDown हैंडलर में राज्य के अद्यतन को बाधित करता है और onChange हैंडलर को कॉल करने से रोकता है। क्योंकि नियंत्रित घटक केवल वही दिखाते हैं जो आप उन्हें बताते हैं (आपके उदाहरण में value राज्य), इससे अंतरिक्ष वर्ण कभी भी प्रभावित नहीं होता है।

यह मेरे लिए एक बग की तरह लग रहा है जिस तरह से ये दोनों घटनाएं परस्पर जुड़ी हैं।

cc @trueadm @gaearon उनके इवेंट सिस्टम विशेषज्ञता के लिए

bvaughn 9 जुल॰ 2020

नमस्ते, मैं यहाँ नया हूँ, प्रतिक्रिया वास्तुकला सीखने की कोशिश कर रहा हूँ।

@bvaughn यहां कुछ ऐसा है जो मुझे समस्या के बारे में मिला।

onKeyDown घटना onChange अवरुद्ध नहीं करती है, बल्कि यह कि इनपुट के संशोधित होने से पहले ट्रिगर होता है। असल में, onKeyDown onChange से पहले चला जाता है क्योंकि टेक्स्ट इनपुट onKeyUp ।

इस विशेष मामले में, समस्या यह है कि keyDown , जब setCode कॉल, पहले dispatchAction _Fiber_ पर memoizedState नए चरित्र के बिना (जाहिर है) और e जो जोड़ा जा रहा है। अंत में, यह इनपुट में नए चरित्र को जोड़ता है। तब useEffect() dispatchAction फिर से _same queue_ के भीतर (निश्चित नहीं कि अगर यह कतार है), लेकिन इसे अपडेट किए गए प्रॉपर के बारे में कुछ भी नहीं पता है। नतीजतन, जब यह commitRoot , तो यह pendingProps पुनर्स्थापित करता है जो memoizedState । संक्षेप में, चरित्र (इस उदाहरण में स्थान) को जोड़ा जाता है और फिर नए चरित्र (स्थान) के बिना तुरंत पुरानी स्थिति को पुनर्स्थापित करता है, इसलिए ऐसा लगता है कि यह कुछ भी नहीं जोड़ता है।

_Same queue_ (?) का उपयोग नहीं करने के उदाहरण के रूप में, यह विशेष उदाहरण:

useEffect(() => {
    if (code === 'add') {
      setCount(c => c + 1)
    } else {
      setCount(c => c - 1)
    }
  }, [code, setCount])

इसमें संशोधन किया जा सकता है:

useEffect(() => {
    if (code === 'add') {
      setTimeout(() => setCount(c => c + 1), 0)
    } else {
      setTimeout(() => setCount(c => c - 1), 0)
    }
  }, [code, setCount])

और यह काम करेगा।

मुझे उम्मीद है कि यह समझ में आता है।

tsybanov 14 जुल॰ 2020

👀1 👍1

इसी मुद्दे में भागते हुए, कीडाउन हैंडलर में आ सेटटाइमआउट में मेरे सेटस्टैट कॉल को लपेटकर इसे ठीक किया।

मैं यह जानने के लिए उत्सुक हूं कि क्या यह कुछ ऐसा है जो रिएक्ट में हुड के नीचे अलग तरह से काम करना चाहिए या यदि यह त्रुटि डेवलपर की तरफ एक बड़ी गलती या खराब पैटर्न की ओर इशारा करती है?

CalvinLeGassick 19 जुल॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

React: बग: OnKeyDown ब्लॉकों में असंबंधित राज्य अद्यतन onChange और नियंत्रित घटक को तोड़ता है

प्रजनन करने कि प्रक्रिया

वर्तमान व्यवहार

अपेक्षित व्यवहार

सभी 3 टिप्पणियाँ

संबंधित मुद्दों