从 TypeScript 中的 useContext 解构值时出错

Posted 2023-03-13

【中文标题】从 TypeScript 中的 useContext 解构值时出错

【英文标题】：Error when destructuring values from useContext in TypeScript

【发布时间】：2021-11-19 22:20:14

【问题描述】：

我对 TypeScript 有点陌生，但我喜欢它。

当我尝试使用 useContext 在 React 中解构我的 Context 时，我遇到了一些我不知道为什么会出现的错误。

错误：Property 'nftContract' does not exist on type 'Web3 | null'.ts(2339)

上下文文件

export interface Web3 
  gameContract: Contract | string;
  nftContract: Contract | string;
  provider: Provider | string;
  account: string;
  etherBalance: string;
  setWeb3?: React.Dispatch<React.SetStateAction<Web3>>;


export const Web3Context = createContext<Web3 | null>(null);

export const Web3Provider: React.FC = ( children ) => 
  const [
     gameContract, nftContract, provider, account, etherBalance ,
      setWeb3
    ] = useState<Web3>(
      gameContract: '',
      nftContract: '',
      provider: '',
      account: '',
      etherBalance: ''
  );

  return (
    <Web3Context.Provider
        value=
            provider,
            gameContract,
            nftContract,
            account,
            etherBalance,
            setWeb3
        
    >
        children
    </Web3Context.Provider>
  );

文件消费上下文（上下文已正确包装在主索引/应用程序文件中。）

const MintNFTForm = () => 
   // Property 'nftContract' does not exist on type 'Web3 | null'.ts(2339)
   const  nftContract  = useContext(Web3Context);

有什么帮助，谢谢！

【参考方案1】：

只有在检查它不是null后才解构该值：

const MintNFTForm = () => 
   const ctxt = useContext(Web3Context);
   if (ctxt == null) return <div>No context yet</div>;

   // `ctxt` is now guaranteed to not be `null`, safe to destructure
   const  nftContract  = ctxt;

代码将上下文的值初始化为null，并声明其类型可以是null，因此任何引用它的代码都必须考虑这种情况：

export const Web3Context = createContext<Web3 | null>(null);

【讨论】：

太棒了，谢谢！我会试试这个。如何将createContext 值设置为空？我希望它没有值null 和只有Web3，但我也不想将任何东西传递给createContext。有没有办法让它空白？当我尝试将其留空时，它抱怨它需要在 1 次争论中通过。

如果我把它改成export const Web3Context = createContext<Web3>();，我得到的错误是：Expected 1 arguments, but got 0.ts(2554) index.d.ts(383, 9): An argument for 'defaultValue' was not provided.

我还希望能够重组上下文而不必检查null，因为这样做会更干净。

什么是Web3？是否有可以传递给createContext 的默认 Web3？ “清洁工”在这里是一个主观术语；检查 null 是正确的，因为值被初始化为 null，这对我来说很清楚！

Web3 是区块链中的东西。根据您的示例：如果我不想返回任何内容，因为我的组件还有其他需要渲染的内容？