web-dev-qa-db-ja.com

プロパティ '値'はタイプ '読み取り専用<{}>'に存在しません

APIの戻り値に基づいて何かを表示するフォームを作成する必要があります。私は次のコードで作業しています。

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<{}>'.

私はコード上でコメントした2行でこのエラーを得ました。このコードは私のものでさえありません、私は反応公式サイト（ https://reactjs.org/docs/forms.html ）から入手しました、しかし、それはここでは機能していません。

私はcreate-react-appツールを使用しています。

reactjstypescript
54
Luis Henrique Zimmermann

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> {
    ...
}
116
Nitzan Tomer

@ nitzan-tomerの回答に加えて、インタフェースを使用することもできます。

interface MyProps {
  ...
}

interface MyState {
  value: string
}

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

どちらかと言えば どちらでも構いません。

20
Leo