如何在带有 TypeScript 的 React 应用程序中使用消费者？

Question

我有一个定义如下的 React 组件：

import React from 'react';
import { AuthUserContext } from '../Session';

const Account = () => (
  <AuthUserContext.Consumer>
    {
      authUser => {
        return(
        <div>
          <h6 className="accountInfo"><strong>Account:</strong> {authUser.email} </h6>
        </div>
        )
      }
    }
  </AuthUserContext.Consumer>
);

export default Account;

这将引发错误Object is possibly 'null'指的是在 h6 行中使用 authUser.email。

即使我这样做：

authUser  ? <h6 className="accountInfo"><strong>Account:</strong>
              {authUser.email}
              </h6>
          : null

它仍然给出同样的错误。

当authUser在withAuthentication中定义时，它的值最初设置为 null，但我认为添加对authUser的检查将确保它在命中 authUser.Z0C83F57C786A0B4ACBZ9EF 时永远不是authUser.email 。

我究竟做错了什么？

Answer 1

此行为可能是由于条件表达式周围缺少大括号引起的，但它是由于null上下文类型和不准确的 TypeScript 错误的组合。

如果上下文是这样创建的

const context: {email: string} | null = null
const AuthUserContext = React.createContext(context)

TypeScript 将推断类型React.Context<null> ，因为context的类型缩小到null 。 通常这只会导致使用时缺少属性错误，但 TypeScript 似乎在闭包内的条件表达式中出现null常量的错误消息问题。

在下面的代码（ 操场）中， weird的产生Object is possibly 'null' o上的“空”错误，而nonWeird产生正确的错误消息。

const o = null
const weird = () => o ? o.p : '' // Error: Object is possibly 'null'.
const notWeird = o ? o.p : '' // Error: Property 'p' does not exist on type 'never'.

这解释了authUser.email上的奇怪错误消息。 可以通过向createContext提供类型参数来解决根本问题：

const React.createContext<{email: string} | null>(null)