Estoy tratando de definir un proveedor de estado global para una aplicación que estoy creando con react. pero me sigue saliendo el error
El objeto pasado como accesorio de valor al proveedor de Contexto (en la línea 19) cambia cada representación. Para arreglar esto, considere envolverlo en un gancho useMemo
Aquí está mi estructura de archivos. estado.ts
export default interface State { data: boolean } export const initialState: State = { data: false, }acción.ts
type Action = { type: "SET_DATA" value: boolean } export default Actioncontexto.ts
import { Context, createContext, Dispatch } from "react" import Action from "./actions" import State, { initialState } from "./state" const GlobalContext: Context<{ globalState: State dispatch: Dispatch<Action> // eslint-disable-next-line @typescript-eslint/no-unused-vars }> = createContext({ globalState: initialState, dispatch: (_: Action) => {} }) export default GlobalContextproveedor.tsx
import * as React from "react" import { ReactNode, ReactElement, useReducer } from "react" import GlobalContext from "./context" import Reducer from "./reducer" import State, { initialState as defaultInitialState } from "./state" export default function GlobalStateProvider({ children, initialState = defaultInitialState, }: { children: ReactNode initialState?: State }): ReactElement { const [globalState, dispatch] = useReducer(Reducer, initialState) return ( <GlobalContext.Provider value={{ dispatch, globalState }}> {children} </GlobalContext.Provider> ) } GlobalStateProvider.defaultProps = { initialState: defaultInitialState, }Revisé el código varias veces y parece que no puedo entender qué está mal y por qué recibo este error. Si alguien puede explicar con más detalle por qué sucede esto y tal vez una solución, eso sería útil.
Esto no es realmente un error de sintaxis, lo que significa que no romperá la aplicación, sino un error de linting, donde algunos linters están tratando de hacer cumplir los mejores estándares. Puede cambiar la configuración de linter para proporcionar advertencias en lugar de generar errores.
Si desea solucionar esto, puede envolver los valores de contexto en un gancho useMemo como sugiere el linter.
const globalContextValue = useMemo( () => ({ dispatch, globalState }), [dispatch, globalState] ); return ( <GlobalContext.Provider value={globalContextValue}> {children} </GlobalContext.Provider> )Tenga en cuenta que existen controversias en torno a esta regla de pelusa, algunos dicen que está desactualizada e innecesaria, por lo que algunos sugerirían desactivar la regla por completo.