Question

在Tanner Linsley描述here的“动作挂钩模式”之后，我正在使用挂钩创建反应状态管理存储。

我正在学习Typescript，并试图使用它来创建该项目，但是在调用自定义钩子来消耗商店时却一直遇到错误：

类型'（）=> {提供者：（{initialValue，children}：{initialValue ?: {}; children：any;}）=>元素上不存在'Property'useStore' useStore：（）=> any;}'ts（2339）

我以简单的反应对其进行了测试，并且可以正常工作，所以这是Typescript的类型或属性定义问题。

已创建通用商店（没有打字稿错误）：

interface IState {}

const initialState: IState = {}

export default function newStore() {
  const context = React.createContext<IState>(initialState)

  const Provider = ({ initialValue = {}, children }): JSX.Element => {
    const [state, setState] = useState(initialValue)
    const contextValue = useMemo(() => [state, setState], [state])

    return <context.Provider value={contextValue}>{children}</context.Provider>
  }
  const useStore = () => useContext(context)

  return { Provider, useStore }
}

Store Action Hooks（两个useStore实例都显示错误）：

import store from "./makeStore";

export const useGalleryOpen = () => {
  const [{ galleryOpen }] = store.useStore()
  return galleryOpen
}

export const useGalleryToggle = () => {
  const [_, setState] = store.useStore()
  return () =>
    setState(prev => ({
      ...prev,
      galleryOpen: !prev.galleryOpen,
    }))
}

任何建议都非常感谢。

Answer 1

问题的关键点（在您的代码沙箱中可见，并且我已经编辑了您的问题以包括它）是store定义。

您将商店定义为import store from "./makeStore";

因此store是一个函数，当被调用时，它返回一个包含以下内容的对象

{
  Provider: any;
  useStore(): any;
}

当您用store.useStore()消费时，您是在犯错误。 store是一个函数，返回值是一个包含useStore函数的对象。

一切都很好替换

store.useStore()

使用

store().useStore()

让我知道您是否需要更多帮助

如何为React Action Hook商店定义Typescript属性和类型

1 个答案: