MOBX和反应集成

Question

在重新编写客户端应用程序时出现有效的钩子错误.(升级代码)

mobx 6.3.8 mobx反应7.2.1，mobx状态树5.0.5反应17.0.1 RN 0.64.3。

我觉得错误就在这里。我搜索了使用商店的代码行，它让我找到了不推荐的网站.我不知道在哪里可以在https://mobx.js.org/react-integration.html站点中找到新的处理方法.这叫什么？

import { createContext, useContext } from "react"
import { RootStore } from "./root-store"


const RootStoreContext = createContext<RootStore>({} as RootStore)

const RootStoreProvider = RootStoreContext.Provider

// hook error here? // export const useStores = () => useContext(RootStoreContext);

错误:错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：

1. 您可能有React和呈现器的版本不匹配(例如React )。
2. 你可能违反了胡克斯的规则
3. 您可能在同一应用程序中有多个React副本，请参阅https://reactjs.org/link/invalid-hook-call获得有关如何调试和解决此问题的提示。

添加更多的上下文..。根存储文件

import { Instance, SnapshotOut, types } from "mobx-state-tree"

import { creatMediaPlayerModel } from "../../models/media-player"
import { createUserModel } from "../../models/user"
import { createContentModel } from "../../models/content"


export const RootStoreModel = types.model("RootStore", {
mediaPlayerStore: creatMediaPlayerModel(),
userStore: createUserModel(),
contentStore: createContentModel(),
})


export type RootStore = Instance<typeof RootStoreModel>

export type RootStoreSnapshot = SnapshotOut<typeof RootStoreModel>

Answer 1

根据这条错误消息：

钩子只能在函数组件的主体内调用。

您不能从函数组件的主体内部调用钩子。所以你违反了钩子的规则。

根据钩子规则，您只能从function函数组件的顶层调用钩子。如果您不在一个功能组件中，那么您就不能使用react *。

从医生那里：

不要在循环、条件或嵌套函数中调用钩子。相反，在早期返回之前，始终在函数的顶层使用钩子。通过遵循此规则，您可以确保每次组件呈现时都以相同的顺序调用钩子。这就是允许React正确地保留多个useState和useEffect调用之间的钩子状态的原因。

这意味着您需要从功能组件中调用useStores。

类似于：

function MyComponent() {
  const myStores = useStores()

  // render component with data from stores here
  return <>{myStore.myData}</>
}

*例外，某种程度上，是一个可以调用其他钩子的自定义钩子。这里的useStores是一个自定义钩子。因此，从自定义钩子调用useContext是可以的。

但是自定义钩子必须遵守与内置钩子相同的使用规则，所以所有钩子都是从函数组件的主体中调用的，两者之间只有函数。