如何在帶有 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)