Provider上传入的hooks，在组件总使用useModel会提示错误

[seafronthu]

What happens?

在rootContainer中使用Provider，且在models添加hooks，但是在页面组件中使用使用useModel编辑器提示错误信息。

Mini Showcase Repository(REQUIRED)

https://github.com/seafronthu/product-management/blob/main/src/layouts/OutermostLayout.tsx

How To Reproduce

Steps to reproduce the behavior: 1. 2.

const ProviderContainer: React.FC<{ children?: React.ReactNode }> = props => {
  // const settings = useModel("settings")
  // console.log(settings)
  // const { clientRoutes } = useAppData();
  // const clientRoute = getClientRoutesObj(clientRoutes)
  const [messageApi, messageContextHolder] = message.useMessage();
  const [notificationApi, notificationContextHolder] = notification.useNotification();
  globalFn.bindTarget('messageApi', messageApi);
  globalFn.bindTarget('notificationApi', notificationApi);
  const { children } = props
  const [config, setConfig] = useState({
    colorPrimary: "#722ED1",
    contentWidth: "Fluid",
    fixSiderbar: true,
    layout: "mix",
    navTheme: "realDark",
    splitMenus: false,
  })
  const settings = () => {
    return {
      config,
      setConfig,
    };
  }
  return <Provider models={{ settings }}>
    <ProConfigProvider dark={config.navTheme === "realDark"}>
      <ConfigProvider theme={{ token: { colorPrimary: config.colorPrimary } }}>
        {messageContextHolder}
        {notificationContextHolder}
        {children}
      </ConfigProvider>
    </ProConfigProvider>
  </Provider>
}

组件提示错误

Expected behavior 1. 2.

没有错误信息

Context

• Umi Version: 4.0.52
• Node Version: v16.4.0
• Platform: MacOs

[fz6m]

配置里 model: {} 开启之后就会自动配置好 model 相关的 Provider 了，之后按照 data-flow 里的约定写 model 文件就可以，不需要自己配置 Provider 。

[seafronthu]

配置里 model: {} 开启之后就会自动配置好 model 相关的 Provider 了，之后按照 data-flow 里的约定写 model 文件就可以，不需要自己配置 Provider 。

我需要在根节点里面使用model变量，但是useModel在根节点不能使用，所以在根节点上Provider包装一下，并且把hooks放进去。

// layout/OutermostLayout.tsx

onst ProviderContainer: React.FC<{ children?: React.ReactNode }> = props => {
  // const settings = useModel("settings")
  // console.log(settings)
  const { clientRoutes } = useAppData();
  const clientRoute = getClientRoutesObj(clientRoutes)
  console.log("aa", clientRoute)
  const [messageApi, messageContextHolder] = message.useMessage();
  const [notificationApi, notificationContextHolder] = notification.useNotification();
  globalFn.bindTarget('messageApi', messageApi);
  globalFn.bindTarget('notificationApi', notificationApi);
  const { children } = props
  const [config, setConfig] = useState({
    colorPrimary: "#722ED1",
    contentWidth: "Fluid",
    fixSiderbar: true,
    layout: "mix",
    navTheme: "realDark",
    splitMenus: false,
  })
  const settings = () => {
    return {
      config,
      setConfig,
      clientRoute
    };
  }
  return <Provider models={{ settings }}>
    <ProConfigProvider dark={config.navTheme === "realDark"}>
      <ConfigProvider theme={{ token: { colorPrimary: config.colorPrimary } }}>
        <Layout>
          {messageContextHolder}
          {notificationContextHolder}
          {children}
        </Layout>
      </ConfigProvider>
    </ProConfigProvider>
  </Provider>
}

// app.ts

export function rootContainer(container: React.ReactNode) {
  return React.createElement(OutermostLayout, null, container);
}

[fz6m]

自己使用的 model Provider 是预期外的部分，没有类型提示，需要自己规避。

[seafronthu]

自己使用的 model Provider 是预期外的部分，没有类型提示，需要自己规避。

那我该如何在rootContainer使用类似useModel，或者有什么替代方案吗？

[fz6m]

使用类似 valtio 的全局存储方案。

[seafronthu]

使用类似 valtio 的全局存储方案。

我直接用useState封装成hooks使用了