'পঠনযোগ্য <{}>' টাইপ করে সম্পত্তি 'মান' বিদ্যমান নেই

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 ) থেকে পেয়েছি , তবে এটি এখানে কাজ করছে না।

আমি তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন সরঞ্জামটি ব্যবহার করছি।

Comments

আপনার সমস্যা মিথ্যা অন্যত্র - দেখুন এই ডেমোটি

— টেড

আমি জানি, এটি সমস্ত "সংকলক" ওয়েবসাইটে কাজ করছে, তবে তারা আমাকে github.com/Mic Microsoft /TypeScript- React-Sterter প্রকল্পটি ব্যবহার করার পরামর্শ দিয়েছিল , এবং টাইপস্ক্রিপ্ট প্রতিযোগিতার মাধ্যমে, এটি কাজ করছে না

— লুইস হেনরিক জিম্মারম্যান

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

ওম, ট্যু ডুড, এটি এখন কাজ করেছে, শুধু আমাকে আরও একটি জিনিস উত্তর দিন, এই বাক্য গঠনটি ঠিক টাইপস্ক্রিপ্টের সাথে সম্পর্কিত? কারণ অফিসিয়াল সাইটে প্রতিক্রিয়া জানানোর সাথে এর মিল কিছু নেই

— লুইস হেনরিক জিম্মারম্যান

হ্যাঁ, এটি কঠোরভাবে সম্পর্কিত টাইপস্ক্রিপ্ট।

— নিতজান টোমর

ডান সংজ্ঞায়িত: শ্রেণি স্কোয়ারটি React.Comp घटक <<মান: স্ট্রিং}, {}> {...} ... {

— রদ্রিগো পেরেজ বার্গুইস

Answer 2

@ নিতজান-টোমারের উত্তর ছাড়াও, আপনার কাছে ইনফেরফেসগুলি ব্যবহার করার বিকল্প রয়েছে :

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

সমস্যাটি হ'ল আপনি নিজের ইন্টারফেসের রাষ্ট্রটিকে আপনার উপযুক্ত পরিবর্তনশীল ধরণের 'মান' দিয়ে প্রতিস্থাপনের ঘোষণা করেন নি is

এখানে একটি ভাল রেফারেন্স

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একটি মান হয় না যা ধরণের । যদি এটি কোনও ডোম উপাদান থাকে তবে আপনার এটি সঠিক ধরণের করতে হবে:

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

এটি রাষ্ট্রের পরিবর্তনশীলগুলির জন্য "সঠিক" প্রকারটি নির্ধারণ করবে যদিও সুস্পষ্ট হওয়া সম্ভবত আরও ভাল

Comments

আমি মনে করি কনস্ট্রাক্টরের স্ট্রিংটি আরম্ভ করার চেষ্টা করার সময় তিনি ত্রুটিটি পেয়েছেন, ইভেন্ট হ্যান্ডলারটি নয়

— রায়_পোলি