具有动态键名的React + TypeScript设置状态

Question

https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#troubleshooting-tips

要验证Stripe检出表单，我试图动态存储状态中表单的更改事件。 该事件包含 elementType ，即“ cardNumber”，“ cardExpiry”或“ cardCvc”。

我将状态设置如下，以存储事件：

interface State {
  cardCvcEvent: stripe.elements.ElementChangeResponse | null;
  cardExpiryEvent: stripe.elements.ElementChangeResponse | null;
  cardNumberEvent: stripe.elements.ElementChangeResponse | null;
}

我有状态更新正在运行，但是我不满意。我想在一个衬里中使用动态键分配来处理此问题。这是我的工作更新，其中注释了所需的行：

public handleChange(e: stripe.elements.ElementChangeResponse) {
  // todo: git gud
  // should be able to figure out typescript so this line works:
  // this.setState({[e.elementType + 'Event']: e});

  switch (e.elementType) {
    case 'cardCvc': {
      this.setState({cardCvcEvent: e});
      break;
    }
    case 'cardExpiry': {
      this.setState({cardExpiryEvent: e});
      break;
    }
    case 'cardNumber': {
      this.setState({cardNumberEvent: e});
      break;
    }
  }
}

我发现了这一点，这似乎是朝着正确的方向发展，但仍然不适用于我的情况：

对此有任何想法。

编辑：打字稿错误输出

Argument of type '{ [x: string]: ElementChangeResponse; }' is not assignable to parameter of type 'State | ((prevState: Readonly<State>, props: Readonly<Props>) => State | Pick<State, "cardCvcEvent" | "cardExpiryEvent" | "cardNumberEvent"> | null) | Pick<State, "cardCvcEvent" | ... 1 more ... | "cardNumberEvent"> | null'.
  Type '{ [x: string]: ElementChangeResponse; }' is missing the following properties from type 'Pick<State, "cardCvcEvent" | "cardExpiryEvent" | "cardNumberEvent">': cardCvcEvent, cardExpiryEvent, cardNumberEvent

Answer 1

我要说的是，打字稿不可能推断出您所使用的键始终是状态类型的“ keyof”，因为您要将两个字符串连接在一起-这就是为什么它显示[x：错误消息中的字符串]。您可以对elementType进行重做，使其类型为keyof（YourStateTypesName），然后就不需要进行字符串连接了，编译器会很高兴。或者，您可以只将串联分配给变量，然后将其强制转换为keyof（YourStateTypesName），它将满足编译器的要求。