离子反应类型不可分配

Question

我正在使用带有以下代码的 ionic-react 及其给出的错误

类型'{状态：IState;调度：React.Dispatch； }' 不可分配给类型 'IState'。 对象字面量只能指定已知属性，而“IState”类型中不存在“状态”。

代码如下所示

State.tsx

import React from "react";

export interface IState {
    count: number;
    loggedIn: boolean;
  }

// set the initial values
const initialState = { count: 0, loggedIn: false };

export type ActionType =
  | { type: "setLoggedIn"; payload: any }
  | { type: "error" };


// create the context
export const Context = React.createContext<IState>(initialState);

export const TheProvider = ({ children }: any): any => {
    /**
     * @param {*} state
     * @param {*} action
     */
    const reducer = (state: IState, action: ActionType): IState => {
      switch (action.type) {
        case "setLoggedIn":
          return { ...state, ...action.payload };
        default:
          throw new Error();
      }
    };
  
    const [state, dispatch] = React.useReducer(reducer, initialState);
  
    // wrap the application in the provider with the initialized context
    return (
      <Context.Provider value={{ state, dispatch }}>{children}</Context.Provider>
    );
  };
  
  export default Context;

Login.tsx

import AppContext, { TheProvider, IState }  from './State'; 


...

const Login: React.FC = () => {
    const { state, dispatch } = React.useContext<any>(AppContext);
  

    const doLogin = async () => {

        try{
          
           dispatch({
                type: 'setLoggedIn',
                payload: {loggedIn: false}
            })

        }catch(err){
          console.error("failed to login with erro", err)
        }
      };

    return (
 <TheProvider>
        <form className="ion-padding">
        <IonToolbar>
          <IonTitle>Login</IonTitle>
        </IonToolbar>
          <IonItem style={{paddingTop:'100px'}}>
            <IonLabel position="floating">Email</IonLabel>
            <IonInput type="email" value={email} onIonChange={e => setEmail(e.detail.value!)}/>
          </IonItem>
          <IonItem>
            <IonLabel position="floating">Password</IonLabel>
            <IonInput type="password" value={password} onIonChange={e => setPassword(e.detail.value!)}/>
          </IonItem>
          <IonItem>
            <IonLabel>{errMessage}</IonLabel>
          </IonItem>
          
          <IonButton className="ion-margin-top" onClick={doLogin} expand="block">
            <IonIcon slot="start" icon={mailOutline} />Login
          </IonButton>
        </form>
        </TheProvider>
    )
};

我现在在调度时遇到错误

TypeError: dispatch is not a function 在doLogin

Answer 1

问题在于这两行之间的差异：

export const Context = React.createContext<IState>(initialState);
// ...
<Context.Provider value={{ state, dispatch }}>

如果您希望您的上下文包括状态以及调度，您需要将您的初始 Context 对象更改为如下内容：

interface ContextType {
    state: IState,
    dispatch?: React.Dispatch<ActionType>
  }
export const Context = React.createContext<ContextType>({ state: initialState });

在您对useContext 的调用中，您可以删除通用的<any>。然后您可能需要检查 dispatch 是否已定义，因为它在上面的 ContextType 中设置为可选：

import AppContext, { TheProvider }  from './State'; 

// ...

const Login = () => {
  const { state, dispatch } = React.useContext(AppContext);

  const doLogin = async () => {
    if (dispatch === undefined) {
      return; // or display error message
    }
    try {
      dispatch({
        type: "setLoggedIn",
        payload: { loggedIn: false },
      });
    } catch (err) {
      console.error("failed to login with error:", err);
    }
  };

  return <div id="login"></div>; // presumably this holds your inputs, 
                                 // submit button, forgot password link, etc.
}

然后，要确保正确传递上下文，您必须确保 Login 是 TheProvider 的子级。在同一个Login.tsx 文件中，您可以像这样定义一个新组件LoginPage，如果您有一个包含页眉、页脚、CSS 等的Layout 组件：

const LoginPage = () => {
  return <TheProvider>
           <Layout>
             <h2>Please enter your information below to log in:</h2>
             <Login />
           </Layout>
         </TheProvider>
}