reactjs - Typescript React UseReducer Type-fel på Provider-värde

Jag stöter för närvarande på fel när jag försöker få min provider att fungera med React Context API i Typescript, jag får följande fel,

Type '{ state: { hasEnterPressed: boolean; searchQuery: string; }; dispatch: Dispatch<stringAction>; }' 
is missing the following properties from type '{ hasEnterPressed: boolean; searchQuery: string; dispatch: 
(state: { hasEnterPressed: boolean; searchQuery: string; }, action: stringAction) => 
{ hasEnterPressed: boolean; searchQuery: string; }; }': hasEnterPressed, searchQuery  TS2739

    50 | 
    51 |     return (
  > 52 |         <SearchContext.Provider value={value}>
       |                                 ^
    53 |             {props.children}
    54 |         </SearchContext.Provider>
    55 |     )

Jag tror att det är relaterat till konstruktionen av mitt CreateContext-anrop, vilket är anledningen till att jag kan stöta på problem. Jag har försökt bygga gränssnittstyper men får fortfarande samma fel.

import React, {useReducer, createContext, Dispatch}  from "react";


export interface Action {
    type: string
}

export interface stringAction extends Action {
    payload: string
}

export interface reducerState {
    hasEnterPressed: boolean
    searchQuery: string,
}


const reducer = (state: reducerState, action: stringAction) => {
    switch(action.type) {
        case "UPDATEKEYPRESS":
            return {
                ...state,
                hasEnterPressed: false
            };
        case "UPDATESEARCHQUERY":
            return {
                ...state,
                searchQuery: action.payload
            }
        default:
            throw new Error();
    }
}

const initalState: reducerState = {
    hasEnterPressed: false,
    searchQuery : '',
}


export const SearchContext = createContext<reducerState>(initalState);

export const SearchProvider: React.FC = (props) => {

    const [state, dispatch] = useReducer(reducer, initalState)

    const value = {state, dispatch}

    return (
        <SearchContext.Provider value={value}>
            {props.children}
        </SearchContext.Provider>
    )
}

export default SearchProvider;

Svar #1

value du skickar in är ett objekt {state, dispatch} medan createContext<reducerState> gör att provider förväntar sig att det ska vara reducerState.

Du behöver antingen ändra typen av kontext till

interface SearchContextValue {
  state: reducerState; 
  dispatch: Dispatch<ReducerAction<typeof reducer>>
}

export const SearchContext = createContext<SearchContextValue>({
 state: initalState, 
 dispatch: () => {} // fake, but it is not possible to provide at this point 
});

eller om du inte behöver skicka en dispatch - skicka tillståndet som värdet

<SearchContext.Provider value={state}>

Observera att det är en bra vana att skriva typernas namn med stor bokstav, annars blir det svårt att skilja dem från variablernas namn.

Relaterade artiklar