将setState与typescript一起使用

Posted 2021-03-27

我不明白错误但我似乎无法像往常一样使用setState。

这是我得到的错误：类型'{[x：number]：any; }'不能赋值给'IState |类型的参数（（prevState：Readonly，props：Readonly）=> IState | Pick | null）|选择|空值'。类型'{[x：number]中缺少属性'inputField'：any; ''但需要'Pick'.ts类型（2345）

interface IState {
  inputField: string;
}

interface IProps {}

export default class Input extends React.Component<IProps, IState> {
  state: IState = {
    inputField: '',
  };

  handleChange = (e: React.FocusEvent<htmlInputElement>) => {
    const {name, value}: any = e.target;
    this.setState({
      [name]: value
    });
  };

  render() {
    const {inputField} = this.state;

    return (
      <input type="text" name="inputField" value={inputField} onChange={this.handleChange} />
    );
  };
}

答案

我想这就是声明你的IState接口的全部意义 - 所以Typescript可以检查你是否用正确的类型设置了正确的属性。

所以基本上你试图设置一个不可知的（在编译时）属性（[name]），并且typescript编译器告诉你它无法运行该函数，因为它缺少预期的inputField属性。

您可能需要将所有有效属性添加到IState接口并使用setState中的属性名称。