reactjs - Typescript React UseReducer Type-fejl på Provider-værdi

Jeg støder i øjeblikket på fejl, når jeg prøver at få min provider til at fungere ved hjælp af React Context API i Typescript, jeg får følgende fejl,

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 |     )

Jeg tror, det er relateret til konstruktionen af mit CreateContext-kald, hvilket er grunden til, at jeg muligvis støder på problemer. Jeg har prøvet at bygge interfacetypen, men jeg får stadig den samme fejl.

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, som du sender ind, er et objekt {state, dispatch}, mens createContext<reducerState> gør provider forventende, at det skal være reducerState.

Du skal enten ændre typen af kontekst til

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 hvis du ikke har brug for at sende en dispatch - send tilstanden som værdien

<SearchContext.Provider value={state}>

Bemærk venligst, at det er god praksis at skrive typers navne med stort, ellers bliver det svært at skelne dem fra variablers navne.

Relaterede artikler