Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] model 插件和 antd 改变主题互相冲突 #12394

Closed
fz6m opened this issue May 15, 2024 · 2 comments · Fixed by #12406
Closed

[Bug] model 插件和 antd 改变主题互相冲突 #12394

fz6m opened this issue May 15, 2024 · 2 comments · Fixed by #12406

Comments

@fz6m
Copy link
Member

fz6m commented May 15, 2024

说明

antd 的插件中提供了一个 useAntdConfigSetter 的功能,它把 antd Config Provider 的配置管理成 state ,从而可以便捷的改变 antd Config Provider ,比如切换主题。来源:#11856

但这个功能和 model 插件一起使用时,会发生冲突,复现代码的大致例子:

const setAntdConfig = useAntdConfigSetter()

 const changeTheme = () => {
    const { themeMode, antdToken } = getThemeToken();
    const targetThemeMode = themeMode === 'dark' ? 'light' : 'dark';
    // 将变量写入localStorage
    setThemeMode(targetThemeMode);
    const algorithm = targetThemeMode === 'light' ? [defaultAlgorithm] : [darkAlgorithm];
    const antdTheme: ThemeConfig = { algorithm };
    if (antdToken) {
      antdTheme.token = antdToken;
    }
    setAntdConfig({ theme: antdTheme });

注:不必拘泥于这段代码的写法,只要在 model 插件开启的时候,使用 setAntdConfig 去改变 antd 的主题,即可复现。

image

反馈来源:#12287

原因

经过初次探索,冲突原因大致如下:

antd config provider 的更新导致整个组件树重新渲染了,走到 model 的那一层 context 的时候,组件重新挂载,导致在重渲染的过程中执行了 setState (因为 model 的 context 里在第一次挂载的时候,急切的需要执行一次获取初始值的操作,而这个操作在执行的时候,正好处于 antd 重渲染的流程中),react 不允许这种行为,所以报错了。

期望的解决方式

因为 antd 的 setAntdConfig 其实是一种正确的 react 使用方式,而 model 的源码比较古老且 hack ,所以让 setAntdConfig 妥协不如修正 model ,所以期望能修正 model 源码来兼容这种用法解决,若实在无法修复,则退而次之再看看如何调整 setAntdConfig 妥协。

目前没有想到较好的方式解决,欢迎任何人贡献 PR

已有解决方案。

cc @xiaohuoni

@xiaohuoni
Copy link
Member

没复现出来,谁帮忙给一下重现一下。
https://github.com/xiaohuoni/max-model-antd
image

@fz6m
Copy link
Member Author

fz6m commented May 18, 2024

知道原因了,你的这个 demo 让我找到了真正原因👍。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants