類型 '{ [x: string]: string; 中缺少屬性 }'

Question

在這個反應應用程序中，有一個帶有幾個輸入字段的表單。 這些字段都使用this.handleChange和onChange屬性。

private handleChange = (event: React.FormEvent<HTMLInputElement>) => {
    let target = event.target as HTMLInputElement;
    this.setState({
        [target.name]: target.value
    });
};

我得到的打字稿錯誤是：

ERROR in [at-loader] ./src/components/FormSubmitHighScore.tsx:43:23 
TS2345: Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'Pick<State, "first_name" | "last_name" | "email_address" | "school_name" | "region" | "submitted">'.
Property 'first_name' is missing in type '{ [x: string]: string; }'.

因此，通過動態設置狀態名稱字段（基於正在使用的輸入）這個 Typescript 錯誤被觸發（但它確實在瀏覽器中工作）。

在這種情況下，我將如何指定正確的類型？

Answer 1

不幸的是，在修復這些錯誤之前 - 您必須采用一些丑陋的解決方法，例如：

this.setState({
    [target.name]: target.value
} as any);

Answer 2

為了避免“任何” linter 警告，我使用：

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

Answer 3

將函數傳遞給 setState 也可以。 我的猜測是因為你在傳播狀態，所以打字稿知道它具有狀態的所有屬性。

    this.setState(state => ({
      ...state,
      [name]: value,
    }));

我遇到了與您遇到的類似的錯誤。 這是我對更改處理程序的實現：

  onChange = (name: keyof ComponentState, value: any) => {
    this.setState(state => ({
      ...state,
      [name]: value,
    }));
  };

Answer 4

當我使用typescript react編程語言來管理我的道具時，我遇到了同樣的問題。 我使用的是CBC ，所以我設法通過將狀態值設置為可選來解決這個問題。 這是我基於類的組件，我在其中跟蹤username 、 email和password的狀態：

interface Props {}
interface State {
  username?: string;
  email?: string;
  password?: string;
}
export default class App extends React.Component<Props, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      username: "",
      password: "",
      email: "",
    };
  }

  onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
  };
  onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    this.setState((state) => ({
      ...state,
      [name]: value,
    }));
  };

  render(): React.ReactNode {
    const { username, password, email } = this.state;
    return (
      <div className="app">
        <form onSubmit={this.onSubmit}>
          <input
            type="text"
            placeholder="username"
            name="username"
            value={username}
            onChange={this.onChange}
          />
          <input
            type="text"
            placeholder="email"
            name="email"
            value={email}
            onChange={this.onChange}
          />
          <input
            type="text"
            placeholder="password"
            name="password"
            value={password}
            onChange={this.onChange}
          />
          <button type="submit">register</button>
        </form>
      </div>
    );
  }
}

通過在State類型中設置可選字段，您不需要這樣做：

this.setState({
    [name]: value
} as any);

因為typescript知道如何處理這個。