web-dev-qa-db-ja.com

Typescript＆ReactJS動的に状態を設定する方法

私はこのインターフェースを自分の状態として定義しています：

interface State {
  id: string;
  name: string;
  description: string;
  dimensionID: string;
  file: File | null;
  operator: string;
  isFormValid: boolean;
  filename: string;
};

簡単な変更ハンドラーがあります。

  update = (event: React.FormEvent<HTMLInputElement>): void => {
    const { name, value } = event.currentTarget;
    this.setState({ [name]: value });
  };

ただし、次のエラーがスローされます。

Error:(109, 19) TS2345: Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'State | Pick<State, "id" | "name" | "description" | "dimensionID" | "file" | "operator" | "isFormValid" | "filename"> | ((prevState: Readonly<State>, props: Readonly<Props>) => State | Pick<...>)'.
  Type '{ [x: string]: string; }' is not assignable to type '(prevState: Readonly<State>, props: Readonly<Props>) => State | Pick<State, "id" | "name" | "description" | "dimensionID" | "file" | "operator" | "isFormValid" | "filename">'.
    Type '{ [x: string]: string; }' provides no match for the signature '(prevState: Readonly<State>, props: Readonly<Props>): State | Pick<State, "id" | "name" | "description" | "dimensionID" | "file" | "operator" | "isFormValid" | "filename">'.

私の質問は、変更時ハンドラーが試行するように、状態を動的に設定するにはどうすればよいですか？このハンドラーはフォームのさまざまな部分で使用されるため、更新する必要がある状態のキーがわかりません。

更新：ソリューションこれから 投稿

  update = (event: React.FormEvent<HTMLInputElement>): void => {
    const { name, value } = event.currentTarget;
    this.setState(prevState => ({
      ...prevState,
      [name]: value,
    }))
  };

動作します！

reactjstypescripttypes
5
Vincent Newkirk

定数nameは文字列に拡張されます。どのバージョンのTSを使用していますか？

あなたはそれをこのようにキャストしますが、それは良い習慣ではありません：

this.setState({
  [name]: value
} as Pick<State, keyof State>);

この問題に関連するバグ：

1
tottomotto

例えば。

update = (name: string, event: React.FormEvent<HTMLInputElement>): void => {
    const { value } = event.currentTarget;
    this.setState({ [name]: value });
  };

<input onChange={this.update.bind(null, 'first_name')} value={this.state.first_name} />
1
Alfred Ayi-bonte