小编Bra*_*den的帖子

我是打字稿新手，正在尝试移植快速应用程序以使用打字稿。服务器使用 JWT 进行身份验证/授权，我有一个实用程序函数可以解码和验证给定的令牌。该函数被包装在一个承诺中，因此我可以在实现它的中间件中使用 async/await。

import httpError from 'http-errors';
import jwt from 'jsonwebtoken';

const { ACCESS_TOKEN_SECRET } = process.env;

export function verifyAccessToken(token: string): Promise<jwt.JwtPayload | undefined> {
  return new Promise((resolve, reject) => {
    jwt.verify(token, ACCESS_TOKEN_SECRET as string, (err, payload) => {
      if (err) {
        return reject(new httpError.Unauthorized());
      }
      return resolve(payload);
    });
  });
}

这个函数工作正常，但是我在 JWT 中有更多信息。具体来说，我有一个role属性，因此有效负载的类型为：

{
  sub: string,  // ID issued by mongoose
  role: string, // My new information that is causing error
  iat: number,
  exp: number
} …

我正在尝试创建一个 React 组件来抽象为我的表单创建一个输入组。所有输入都具有相同的布局 - 一个标签，下面是输入，如果存在错误/信息文本，这些将显示在输入下。

以前我正在处理我自己的表单状态/处理程序。现在我正在尝试使用 formik（使用 Yup 验证），error并且touched在嵌套信息时动态访问和字段时遇到了问题。

这是我的输入组组件：

import React from 'react';
import { FormGroup, Label, Input, FormFeedback, FormText } from 'reactstrap';
import { Field, ErrorMessage } from 'formik';

const InputGroup = ({ name, label, type, info, required }) => {
  return (
    <FormGroup>
      <Label htmlFor={name}>{label}{required && '*'}</Label>
      <Field name={name}>
        {({field, form}) => (
          <Input {...field} id={name} type={
                 invalid={form.errors[name] && form.touched[name]} //problem here
          />
        )}
      </Field>
      {info && <FormText color="muted">{info}</FormText>}
      <ErrorMessage name={name}>
          {msg => …