संपत्ति 'मान' टाइप पर मौजूद नहीं है 'Readonly <{}>'

Question

मुझे एक ऐसा फॉर्म बनाने की जरूरत है जो एक एपीआई के रिटर्न वैल्यू के आधार पर कुछ प्रदर्शित करेगा। मैं निम्नलिखित कोड के साथ काम कर रहा हूं:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value); //error here
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} /> // error here
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

मुझे निम्नलिखित त्रुटि मिल रही है:

error TS2339: Property 'value' does not exist on type 'Readonly<{}>'.

मुझे यह त्रुटि दो पंक्तियों में मिली जो मैंने कोड पर टिप्पणी की थी। यह कोड मेरा भी नहीं है, मुझे यह प्रतिक्रिया आधिकारिक साइट ( https://reactjs.org/docs/forms.html ) से मिला है , लेकिन यह यहाँ काम नहीं कर रहा है।

Im-react-app टूल का उपयोग कर।

Comments

आपकी समस्या कहीं और है - यह डेमो

— टेड

मुझे पता है, इन सभी "संकलक" वेबसाइटों पर इसका काम कर रहा है, लेकिन उन्होंने मुझे इस परियोजना github.com/Microsoft/TypeScript-React-Starter को करने के लिए इसका उपयोग करने की सलाह दी , और टाइपस्क्रिप्ट शिकायतकर्ता के माध्यम से, यह काम नहीं कर रहा है

— लुइस हेनरिक ज़िमरमैन

Answer 1

इस तरह Component परिभाषित किया गया है:

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }

जिसका अर्थ है कि राज्य (और रंगमंच की सामग्री) के लिए डिफ़ॉल्ट प्रकार है: {}।
यदि आप चाहते हैं कि आपका घटक valueराज्य में है तो आपको इसे इस तरह परिभाषित करने की आवश्यकता है:

class App extends React.Component<{}, { value: string }> {
    ...
}

या:

type MyProps = { ... };
type MyState = { value: string };
class App extends React.Component<MyProps, MyState> {
    ...
}

Comments

omg, ty दोस्त, यह अब काम किया है, बस मुझे एक और बात का जवाब दो, यह वाक्यविन्यास टाइपस्क्रिप्ट से संबंधित है? क्योंकि प्रतिक्रिया आधिकारिक साइट में यह कुछ भी समान नहीं है

— लुइस हेनरिक ज़िमरमैन

हाँ, यह कड़ाई से संबंधित टाइपस्क्रिप्ट है।

— निट्ज़ेन तोमर

सही परिभाषित यह है: वर्ग स्क्वायर React.Component <{value: string}, {}> {...} का विस्तार करता है

— रोड्रिगो पेरेज़ बर्गस

Answer 2

@ Nitzan-tomer के उत्तर के अलावा, आपके पास इनफैस का उपयोग करने का विकल्प भी है :

interface MyProps {
  ...
}

interface MyState {
  value: string
}

class App extends React.Component<MyProps, MyState> {
  ...
}

// Or with hooks, something like

const App = ({}: MyProps) => {
  const [value, setValue] = useState<string>(null);
  ...
};

या तो ठीक है, जब तक आप सुसंगत हैं।

Comments

कृपया अपने पोस्ट के संदर्भ में सुसंगत का क्या अर्थ है ताकि मध्यम लेख (जो एक महान उपयोगी कड़ी है, धन्यवाद) पढ़ने की आवश्यकता के बिना इसका पूरा मूल्य हो सके।

— कार्ल रिक्टर

Answer 3

समस्या यह है कि आपने अपने इंटरफ़ेस राज्य को 'वैल्यू' के उपयुक्त चर प्रकार के साथ बदलने की घोषणा नहीं की है

यहाँ एक अच्छा संदर्भ है

interface AppProps {
   //code related to your props goes here
}

interface AppState {
   value: any
}

class App extends React.Component<AppProps, AppState> {
  // ...
}

Answer 4

event.targetउस प्रकार का EventTargetहोता है जिसमें हमेशा मान नहीं होता है। यदि यह एक DOM तत्व है, तो आपको इसे सही प्रकार पर ले जाना होगा:

handleChange(event) {
    this.setState({value: (event.target as HTMLInputElement).value});
}

यह राज्य चर के लिए "सही" प्रकार का अनुमान लगाएगा, हालांकि स्पष्ट होना बेहतर है

Comments

मुझे लगता है कि उसे त्रुटि तब मिलती है जब वह कंस्ट्रक्टर में स्ट्रिंग को इनिशियलाइज़ करने की कोशिश करता है, ईवेंट हैंडलर के लिए नहीं

— Ray_Poly