Question

我正在使用useContext钩子和tsx。

const StoreContext = createContext({});

export function useStore() {
   const [store] = useContext(StoreContext);
   return store;
}

export function useDispatch() {
    const [, dispatch] = useContext(StoreContext);
    return dispatch;
}

[store]和[dispatch]都遇到相同的错误。

类型'{}'不是数组类型

有什么解决方法吗？

Answer 1

通过为createContext提供类型参数，告诉TypeScript上下文的类型是什么。

考虑以下示例：

interface Theme {
  mode: 'light' | 'dark'
}

Thame是我们上下文的形状。该界面需要转到createContext：

const StoreContext = React.createContext<Theme>({ mode: 'dark' });

const { mode } = React.useContext(StoreContext);

(mode === 'dark') || (mode === 'light') // true

您的上下文不必是对象。在此示例中，上下文由数字数组组成。

const StoreContext = React.createContext<number[]>([0]);

const [first, ...rest] = React.useContext(StoreContext);

(typeof first === 'number') // true

Answer 2

我尝试使用useContext，但是没有用。我看到了将React和ReactDOM降级到16.7.0-alpha-2的建议，但是那也不起作用。我的问题的解决方案是将组件包装在myContext.Consumer中。对于基于类的组件，可以使用yourClass.contextType = yourContext，然后可以使用“ this.context”访问功能。请参阅此文档：https://reactjs.org/docs/context.html

tsx的useContext

2 个答案: