如何在不一直纠正我的情况下使用上下文提供程序 api 和打字稿

Question

下面的代码抛出错误：

frontend_1  | TypeScript error in /frontend/src/State/Store.tsx(23,27):
frontend_1  | Property 'test' is missing in type 'any[]' but required in type '{ test: string; }'.  TS2741
frontend_1  | 
frontend_1  |     21 | 
frontend_1  |     22 |     return (
frontend_1  |   > 23 |         <Context.Provider value={[state, dispatch]}>
frontend_1  |        |                           ^
frontend_1  |     24 |             {children}
frontend_1  |     25 |         </Context.Provider>
frontend_1  |     26 |     )

import { createContext, useReducer } from "react";

const initialState = {
    test: "text-string"
}


const reducer = (state: any, action: any): any => {
    switch (action.type) {
        case 'SET_PUBLIC_KEY':
            return {
                ...state,
            }
        default:
            return state;
    }
};

function Store({ children }: any) {
    const [state, dispatch] = useReducer(reducer, initialState);

    return (
        <Context.Provider value={[state, dispatch]}>
            {children}
        </Context.Provider>
    )
};

export const Context = createContext(initialState);
export default Store;

我试图修复它几个小时，但无论我尝试过什么，它仍然会抛出同样的错误。如果有人可以帮助我，我真的很感激。这个例子在普通 javascript 中非常有效，所以问题只出现在打字稿上。

提前致谢！

Answer 1

传递给提供者的 value（具有状态和分派的数组）的类型与传递给 createContext 的 initialState（仅状态）的类型不同。只要确保这两个值是同一类型即可。

你可以为 reducer 的状态、动作定义接口，并在任何地方使用它们。

interface State {
  test: string;
}

interface Action {
  type: string;
  payload?: any; // update this as you like
}

const initialState = {
  test: "text-string"
};

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case "SET_PUBLIC_KEY":
      return {
        ...state,
        test: "modifed"
      };
    default:
      return state;
  }
};

// passing an array that matches the type of context's value
export const Context = createContext<[State, Dispatch<Action>]>([
  initialState,
  () => initialState
]);

function Store({ children }: any) {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <Context.Provider value={[state, dispatch]}>{children}</Context.Provider>
  );
}

const Child = () => {
  const [state, dispatch] = useContext(Context);

  return (
    <div onClick={() => dispatch({ type: "SET_PUBLIC_KEY" })}>{state.test}</div>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Store>
        <Child />
      </Store>
    </div>
  );
}

如何在不一直纠正我的情况下使用上下文提供程序 api 和打字稿

How can I use the context provider api and typescript without correcting me all the time

state

typescript

reactjs

react-context