Question

类似于JavaScript中的this。

我有一个带有接口的React组件：

interface IState {
  email: string,
  passwordOne: string,
  passwordTwo: string,
  error: {}
}

class SignUpForm extends React.Component<{}, IState> {
  constructor(props) {
    super(props)
  }
...

onChange = event => {
  this.setState({ [event.target.name]: event.target.value });
};
...

<input type="email" placeholder="Your email address" name="email"
    value={email} onChange={this.onChange}/>
...

setState抱怨类型参数不能分配给IState。

是否可以解决此问题，或者在TS中无法解决？

Answer 1

您永远不要在setState调用中传播this.state，因为setState异步发生，并且最终可能会遇到一些重大且难以跟踪的竞争状况问题。

如果要使用欺骗性的方式欺骗类型系统，可以使用：

  onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    let key = event.target.name;
    let value = event.target.value;
      this.setState(state=>({...state, [key]: value }));
  };

或忽略打字稿错误，因为这基本上就是您正在做的事情：

  onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    let key = event.target.name;
    let value = event.target.value;
    // @ts-ignore
    this.setState({[key]: value });
  };

如果要解决它而没有类型问题，请使用以下注释中的解决方案：https://github.com/Microsoft/TypeScript/issues/13948#issuecomment-412365629

private handleChange = <T extends keyof IState>(event: React.ChangeEvent<HTMLInputElement>) => {
  const newState = {
    [event.target.name]: event.target.value,
    // keyNotInState: '42', -> would throw a compile time error
    // numericKeyInState: 'assigning wrong type' -> would throw a compile time error
  };
  this.setState(newState as { [P in T]: IState[P]; });
}

Answer 2

我相信您可以破解它，使其工作……如果失败，因为IState需要所有属性，而您只是设置一个。

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

打字稿通过接口上的变量设置对象键

2 个答案: