类型“未知 []”缺少“初始状态”类型的以下属性答案

【问题标题】：Type 'unknown[]' is missing the following properties from type 'InitialState'类型“未知 []”缺少“初始状态”类型的以下属性
【发布时间】：2021-12-26 01:31:57
【问题描述】：

想弄清楚如何将类型传递给值？

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

类型“unknown[]”缺少类型“InitialState”的以下属性：navigateTo、user、avatar、dashBoardSelectedMenuItemts(2739) index.d.ts(338, 9)：预期类型来自属性“值”，该属性在此处声明为类型“IntrinsicAttributes & ProviderProps” (JSX 属性) 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;

感谢收看。

【问题讨论】：

标签： reactjs typescript react-context use-reducer

【解决方案1】：

试试这个

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;

在你的 reducer 中添加如下状态的类型信息

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

【讨论】：

您已关闭错误现在已移至“状态”而不是值...类型“{}”缺少类型“初始状态”中的以下属性：navigateTo、用户、头像、dashBoardSelectedMenuItem
@fuzzybear，更新了答案
与@shankar 的评论一起使用，从 usereducer 中删除了任何内容
以最接近的方式接受您的答案不需要减速器代码，请在下面注明@shankar upadhyay。

【解决方案2】：

让我试着帮助你。

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

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

typeof null 是 Object。

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

类似问题可以访问此链接Using react context with react hooks in typescript

【讨论】：

您好，将值更改为空字符串后，值仍然在抱怨 type unknown[] is missing the ... ，和之前一样，感谢您的尝试。
嗨，尝试 value={[{{initialState:state}, dispatch]}>
createContext]> 如果没有目的，您可以在删除数组后尝试 createContext>
与上面的@Amila Senadheera 答案结合使用