类型 'unknown[]' 缺少类型 'InitialState' 的以下属性

Question

正在尝试找出如何将类型传递给 value?

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

Type 'unknown[]' is missing the following properties from type 'InitialState': navigateTo, user, avatar, dashBoardSelectedMenuItemts(2739) index.d.ts(338, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps' (JSX attribute) 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;

感谢观看。

Answer 1

让我尽力帮助你。

此处，由于您已将类型 os 用户和初始状态中的头像定义为字符串，因此您应该仅将字符串作为值传递。

也许您传递的是 null 而不是空字符串 "" 可以解决类型问题。

typeof null 是对象。

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

您可以访问此 link 以解决类似问题

Answer 2

试试这个

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;

在你的减速器中添加状态的类型信息，如下所示

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

类型 'unknown[]' 缺少类型 'InitialState' 的以下属性

Type 'unknown[]' is missing the following properties from type 'InitialState'

typescript

reactjs

react-context

use-reducer