FastGPT
FastGPT copied to clipboard
labring
渲染markdown a组件页面崩溃
例行检查
- [x] 我已确认目前没有类似 issue
- [x] 我已完整查看过项目 README，以及项目文档
- [x] 我使用了自己的 key，并确认我的 key 是可正常使用的
- [x] 我理解并愿意跟进此 issue，协助测试和提供反馈
- [x] 我理解并认可上述内容，并理解项目维护者精力有限，不遵循规则的 issue 可能会被无视或直接关闭
你的版本
- [ ] 公有云版本
- [x] 私有部署版本, 具体版本号: 4.9.6
问题描述, 日志截图，配置文件等 渲染markdown a组件导致页面崩溃，在4.9.6 / 4.9.7的projects/app/src/components/Markdown/A.tsx组件内if语句内有hooks导致多次渲染此a组件hook执行顺序不一致的情况。hook不能在if内使用是react实现如此，如果需要在if内执行该条件内才需要执行的逻辑，可单独抽出组件，使得hook不在if内而是在函数组件内顶层。
为防止其他react代码也出现此问题，建议在eslint规则加入react-hooks/rules-of-hooks并使用命令全量检查代码。
error stack:
Warning: React has detected a change in the order of Hooks called by A. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks
Previous render Next render
------------------------------------------------------
1. useContext useContext
2. useCallback useCallback
3. useState useState
4. useRef useRef
5. useEffect useEffect
6. useRef useRef
7. useEffect useEffect
8. useEffect useEffect
9. useContext useContext
10. useCallback useCallback
11. useState useState
12. useRef useRef
13. useEffect useEffect
14. useRef useRef
15. useEffect useEffect
16. useEffect useEffect
17. useContext useContext
18. useCallback useCallback
19. useState useState
20. useRef useRef
21. useEffect useEffect
22. useRef useRef
23. useEffect useEffect
24. useEffect useEffect
25. useContext useContext
26. useContext useContext
27. useContext useContext
28. useMemo useMemo
29. useCallback useCallback
30. useRef useRef
31. useState useState
32. useCallback useCallback
33. useRef useRef
34. useRef useRef
35. useMemo useMemo
36. useEffect useEffect
37. useRef useRef
38. useRef useRef
39. useRef useRef
40. useRef useRef
41. useRef useRef
42. useEffect useEffect
43. useEffect useEffect
44. useRef useRef
45. useEffect useEffect
46. useRef useRef
47. useEffect useEffect
48. useRef useRef
49. useEffect useEffect
50. useRef useRef
51. useRef useRef
52. useEffect useEffect
53. useEffect useEffect
54. useRef useRef
55. useEffect useEffect
56. useEffect useEffect
57. useRef useRef
58. useRef useRef
59. useRef useRef
60. useRef useRef
61. useEffect useEffect
62. useRef useRef
63. useRef useRef
64. useRef useRef
65. useEffect useEffect
66. useRef useRef
67. useEffect useEffect
68. useRef useRef
69. useMemo useMemo
70. useRef useRef
71. useRef useRef
72. useMemo useMemo
73. useRef useRef
74. useRef useRef
75. useMemo useMemo
76. useRef useRef
77. useRef useRef
78. useMemo useMemo
79. useRef useRef
80. useRef useRef
81. useMemo useMemo
82. useRef useRef
83. useRef useRef
84. useMemo useMemo
85. useRef useRef
86. undefined useMemo
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Error Component Stack
at A (A.tsx:24:14)
at LoadableComponent (loadable.shared-runtime.js:113:9)
at p (<anonymous>)
at div (<anonymous>)
at Markdown (index.js:181:21)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at MarkdownRender (index.tsx:46:27)
at Markdown (index.tsx:38:24)
at RenderText (AIResponseBox.tsx:87:3)
at AIResponseBox (AIResponseBox.tsx:223:3)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at Flex2 (flex.mjs:14:11)
at AIContentCard (ChatItem.tsx:81:3)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at Card2 (card.mjs:30:99)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at ChatItem (ChatItem.tsx:115:11)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at MyBox (index.tsx:11:18)
at memoizedFn.current (index.js:32:34)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at MyBox (index.tsx:11:18)
at ChatBox (index.tsx:102:3)
at ContextProvider (index.modern.mjs:36:5)
at Provider (Provider.tsx:129:3)
at ChatBoxContainer (<anonymous>)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at Flex2 (flex.mjs:14:11)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at MyBox (index.tsx:11:18)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at Flex2 (flex.mjs:14:11)
at ChatTest (ChatTest.tsx:33:21)
at ContextProvider (index.modern.mjs:36:5)
at ChatRecordContextProvider (chatRecordContext.tsx:50:3)
at ContextProvider (index.modern.mjs:36:5)
at ChatItemContextProvider (chatItemContext.tsx:113:3)
at Render (ChatTest.tsx:182:34)
at ContextProvider (index.modern.mjs:36:5)
at WorkflowContextProvider (index.tsx:329:3)
at ContextProvider (index.modern.mjs:36:5)
at ContextProvider (index.modern.mjs:36:5)
at WorkflowInitContextProvider (workflowInitContext.tsx:48:40)
at ReactFlowProvider (index.mjs:4123:30)
at ReactFlowCustomProvider (index.tsx:49:3)
at Render (<anonymous>)
at LoadableComponent (loadable.shared-runtime.js:113:9)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at AppDetail (index.tsx:30:47)
at ContextProvider (index.modern.mjs:36:5)
at AppContextProvider (context.tsx:108:31)
at Provider (<anonymous>)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at Auth (auth.tsx:20:17)
at div (<anonymous>)
at eval (emotion-element-c39617d8.browser.esm.js:60:66)
at ChakraComponent2 (system.mjs:47:15)
at Layout (index.tsx:54:19)
at EnvironmentProvider (env.mjs:33:11)
at ColorModeProvider2 (color-mode-provider.mjs:31:5)
at ThemeProvider (emotion-element-c39617d8.browser.esm.js:123:50)
at ThemeProvider (providers.mjs:25:11)
at Provider (provider.mjs:21:5)
at ChakraProvider (create-provider.mjs:15:5)
at ChakraUIContext (ChakraUI.tsx:13:35)
at ContextProvider (index.modern.mjs:36:5)
at I18nContextProvider (I18n.tsx:16:32)
at ContextProvider (index.modern.mjs:36:5)
at SystemStoreContextProvider (useSystem.tsx:22:3)
at QueryClientProvider (QueryClientProvider.mjs:48:3)
at QueryClientContext (QueryClient.tsx:17:31)
at App (_app.tsx:39:16)
复现步骤
预期结果 页面不会崩溃
相关截图
