Reactjs 在类型{}中缺少，但在类型'中是必需的'&''；不可分配给字符串索引类型''；错误

我试图实现的主要目的是将登录用户的电子邮件地址作为密钥传递给

dict

，获取其相应的令牌值，并使用它作为查询参数进行API调用。用户的电子邮件地址来自用户登录时返回的用户数据，我只需要他/她的电子邮件地址。这就是定义

userInfo

接口的地方。在下面的代码段中，编译器抛出一个错误，指出“属性'email'在类型{}中丢失，但在类型'userInfo'中是必需的”。我通过在接口中的

email

变量的末尾添加“？”修复了此问题。然后它给了我另一个错误：“类型为'string | undefined'的属性'email'不可分配给字符串索引类型'string'。”我理解这个问题，因为

email

是对象的唯一属性，不应未定义。由于以上这些错误，我完全被困在这一点上。如果你能给我一个解决这个问题的建议，我将不胜感激

//tokenDict.tsx
export const tokenDict: { [email: string]: string } = {
  "user1@example.com": "sample_token1",
  "user2@example.com": "sample_token2",
};



//HomeScreen.tsx
interface userInfo {
  email: string; //email vs email?
  [key: string]: string; 
}
const HomeScreen: React.FC = () => {
  const user: userInfo = useGlobalState("user"); //user object returned from login process is stored in user state in Redux.
  const userEmail: string = user.email;
  const token = tokenDict[userEmail];

---

就所需内容与可选内容而言，其中一些内容取决于您的应用程序：

• 您是否总是从

  useGlobalState（“用户”）返回用户，或者有时在没有用户登录时加载此组件

• 是否每个用户对象都有电子邮件属性
• 每个电子邮件地址都有令牌吗

当您遇到变量可能为空或未定义的情况时，您需要检查它是否存在。如果它不存在，您可能希望抛出错误或显示其他组件。例如，如果没有登录用户，您可能希望呈现登录表单

根据错误“类型“{}”中缺少属性“email”，但类型“userInfo”中需要属性“email”，我认为在没有登录用户的情况下，您在钩子中返回了一个空对象。我建议您返回

undefined

。您有一个有效的

userInfo

对象，或者没有用户

我没有你所有的代码（比如

useGlobalState

hook），所以这只是你如何处理它的存根。让我们假设第二个和第三个要点的答案是“是”，我们需要做的唯一检查是是否有用户

所有用户都会收到一封电子邮件。（而不是索引签名

[key:string]：string；

我将定义特定的键和值）

某种钩子访问当前用户：

const useCurrentUser = (): UserInfo | undefined => {
  // implementation
}

应用程序中需要凭据的部分可以将这些凭据作为道具：

interface AuthenticatedProps {
    user: UserInfo;
    token: string;
}

const Authenticated: React.FC<AuthenticatedProps> = ({user, token}) => {
    return (
        <div>Some Logged In Stuff</div>
    )
}

interface AuthenticatedProps {
    user: UserInfo;
    token: string;
}

const Authenticated: React.FC<AuthenticatedProps> = ({user, token}) => {
    return (
        <div>Some Logged In Stuff</div>
    )
}

const AccessRestricted: React.FC = () => {
    return (
        <div>You must be logged-in to view this content.</div>
    )
}

const HomeScreen: React.FC = () => {
  const user = useCurrentUser();
  if ( ! user ) {
      return (
          <AccessRestricted />
      )
  }
  const userEmail: string = user.email;
  const token = tokenDict[userEmail];
  return (
      <Authenticated
        token={token || ''}
        user={user}
      />
  )
}