Question

我不理解该错误，但似乎无法像平常一样使用setState。

这是我得到的错误：类型'{[x：number]的参数：任意； }'不可分配给'IState |类型的参数。（（（prevState：只读，props：只读）=> IState | Pick | null）|选择|空值'。类型'{[x：number]：任意；缺少属性'inputField'。 }”，但在“ 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} />
    );
  };
}

Answer 1

我想这就是声明IState接口的全部要点-这样Typescript可以检查您是否使用正确的类型设置了正确的属性。

因此，基本上，您正在尝试设置一个不可知的（在编译时）属性（[name]），而打字稿编译器告诉您由于缺少预期的inputField属性而无法运行该函数。

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

将setState与打字稿一起使用

1 个答案: