IT技术 - React + TypeScript 使用动态键名设置状态 - 吾爱随笔录

为了验证 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;
    }
  }
}

我发现了这个，这似乎指向了正确的方向，但它仍然不适用于我的案例：

使用 TS 键入动态对象键

对此的任何想法表示赞赏。

编辑：typescript错误输出

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