反应上下文和打字稿

Question

我从 typescript 收到以下 linting 错误，但我不知道确切原因，因为 IBlockchainContextValue 已经具有其 IBlockchainContextState 类型的 state 属性，同时已经具有所有这些加载、帐户...属性.. .也许最好看一下代码和附图来理解Typescript问题。

// Blockchain context

import React from 'react';

interface IBlockchainContextState {
  loading: boolean;
  account: string;
  tokemonToken: any; // TODO
  web3: any; // TODO
  errorMessage: string;
}

interface IBlockchainContextValue {
  state: IBlockchainContextState;
  dispatch: React.Dispatch<any>;
}

const initialState: IBlockchainContextState = {
  loading: false,
  account: '',
  tokemonToken: null,
  web3: null,
  errorMessage: '',
};

const BlockchainContext =
  React.createContext<IBlockchainContextState>(initialState);

const BlockchainContextProvider: React.FC<IBlockchainContextValue> = ({
  children,
}) => {
  const [loading, setLoading] = React.useState(false);
  const [account, setAccount] = React.useState('');
  const [tokemonToken, setTokemonToken] = React.useState(null);
  const [web3, setWeb3] = React.useState(null);
  const [errorMessage, setErrorMessage] = React.useState('');

  // Context Update Setters

  const blockchainReducer = (
    state: IBlockchainContextState,
    action: any
  ): IBlockchainContextState => {
    switch (action.type) {
      case 'SET_LOADING':
        return { ...state, loading: action.payload };
      case 'SET_ACCOUNT':
        return { ...state, account: action.payload };
      case 'SET_TOKEN':
        return { ...state, tokemonToken: action.payload };
      case 'SET_WEB3':
        return { ...state, web3: action.payload };
      case 'SET_ERROR_MESSAGE':
        return { ...state, errorMessage: action.payload };
      default:
        return state;
    }
  };

  const [state, dispatch] = React.useReducer(blockchainReducer, initialState);

  const blockchainContextValue = React.useMemo(
    () => ({
      state,
      dispatch,
    }),
    [state, dispatch]
  );

  return (
    <BlockchainContext.Provider value={blockchainContextValue}>
      {children}
    </BlockchainContext.Provider>
  );
};

export { BlockchainContext, BlockchainContextProvider };

Typescript hint

Answer 1

问题是你定义了不正确的上下文值类型。

您正在使用以下类型定义上下文：

// note lack of dispatch
const BlockchainContext =
  React.createContext<IBlockchainContextState>(initialState);

// but you are instantiating the provider with:
return (
  <BlockchainContext.Provider value={blockchainContextValue}>
    {children}
  </BlockchainContext.Provider>
)

// which has a type of:
type ContextValue = {
  state: IBlockchainContextState,
  dispatch: React.Dispatch<Actions> // in your case this might be any ATM
}

打字稿错误正确地告诉您，您提供的值缺少 IBlockchainContextState 中的所有属性，因为您没有提供。

我建议简单地将上下文类型重新定义为：

const BlockchainContext = React.createContext<{
  state: IBlockchainContextState,
  dispatch: React.Dispatch<Actions>, // probably need a type for your actions
}>({
  state: initialState,
  dispatch: () => {}, // initialise with an empty function
}),