reactjs - Typen 'unknown[]' saknar följande egenskaper från typen 'InitialState'

Försöker lista ut hur man skickar typer till value?

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

Typen 'unknown[]' saknar följande egenskaper från typen 'InitialState': navigateTo, user, avatar, dashBoardSelectedMenuItemts(2739) index.d.ts(338, 9): Den förväntade typen kommer från egenskapen 'value' som deklareras här på typen 'IntrinsicAttributes & ProviderProps' (JSX-attribut) React.ProviderProps.value: InitialState

import React, { createContext } from "react";
import Reducer from "./reducer";

interface InitialState {
  navigateTo: string;
  user: string;
  avatar: string;
  dashBoardSelectedMenuItem: string;
}

const initialState: InitialState = {
  navigateTo: "dashboard",
  user: null,
  avatar: null,
  dashBoardSelectedMenuItem: "dashboard",
};
export const Context = createContext<InitialState>(initialState);

const Store = ({ children }) => {
  const [state, dispatch] = React.useReducer<any>(Reducer, initialState);

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

export default Store;

Tack för att du tittade.

Svar #1

Prova detta

import React, { createContext } from "react";
import Reducer from "./reducer";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

interface InitialState {
  navigateTo: string;
  user: string | null;
  avatar: string | null;
  dashBoardSelectedMenuItem: string;
}

const initialState: InitialState = {
  navigateTo: "dashboard",
  user: null,
  avatar: null,
  dashBoardSelectedMenuItem: "dashboard"
};

export const Context = createContext<[InitialState, React.Dispatch<any>]>([
  initialState,
  () => {}
]);

const Store = ({ children }) => {
  const [state, dispatch] = React.useReducer(Reducer, initialState);

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

export default Store;

I din reducer lägg till typinformationen för tillståndet som nedan

export const Reducer = (state: InitialState, action:any): InitialState => {
  switch (action.type) {
    ...
    ...
  }
}

Svar #2

Låt mig försöka hjälpa dig.

Här, eftersom du har definierat typen av användare och avatar i initialt tillstånd som sträng, bör du endast skicka sträng som värde.

Kanske du skickar null istället för en tom sträng "" skulle kunna lösa typproblemet.

typen av null är Object.

const initialState: InitialState = { navigateTo: "dashboard", user: "", avatar: "", dashBoardSelectedMenuItem: "dashboard", };

Du kan besöka denna länk för liknande problem Att använda React Context med React Hooks i TypeScript