search

ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
93.39k stars 51.04k forks source link

React has detected a change in the order of Hooks called by List. #52652

Closed ianzone closed 3 days ago

ianzone commented 5 days ago

Reproduction link

https://github.com/ianzone/antd-bug

Steps to reproduce

  1. git clone https://github.com/ianzone/antd-bug
  2. bun i
  3. bun run dev
  4. 点击输入框左侧图标
  5. 点击搜索栏
  6. 滚动表单

What is expected?

控制台不报错

What is actually happening?

hook.js:608 
 React has detected a change in the order of Hooks called by List. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://react.dev/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useCallback                useCallback
2. useState                   useState
3. useRef                     useRef
4. useRef                     useRef
5. useRef                     useRef
6. useEffect                  useEffect
7. useMemo                    useMemo
8. useRef                     useRef
9. useRef                     useRef
10. useRef                    useRef
11. useState                  useState
12. useState                  useState
13. useState                  useState
14. useRef                    useRef
15. useRef                    useRef
16. useState                  useState
17. useState                  useState
18. useEffect                 useEffect
19. useMemo                   useMemo
20. useLayoutEffect           useLayoutEffect
21. useState                  useState
22. useRef                    useRef
23. useRef                    useRef
24. useMemo                   useMemo
25. useMemo                   useMemo
26. useRef                    useRef
27. useRef                    useRef
28. useRef                    useRef
29. useRef                    useRef
30. useRef                    useRef
31. useRef                    useRef
32. useCallback               useCallback
33. useRef                    useRef
34. useCallback               useCallback
35. useRef                    useRef
36. useRef                    useRef
37. useRef                    useRef
38. useRef                    useRef
39. useRef                    useRef
40. useRef                    useRef
41. useRef                    useRef
42. useRef                    useRef
43. useRef                    useRef
44. useRef                    useRef
45. useRef                    useRef
46. useRef                    useRef
47. useRef                    useRef
48. useRef                    useRef
49. useRef                    useRef
50. useLayoutEffect           useLayoutEffect
51. useLayoutEffect           useLayoutEffect
52. useEffect                 useEffect
53. useRef                    useRef
54. useLayoutEffect           useLayoutEffect
55. useLayoutEffect           useLayoutEffect
56. useRef                    useRef
57. useLayoutEffect           useLayoutEffect
58. useLayoutEffect           useLayoutEffect
59. useRef                    useRef
60. useState                  useState
61. useRef                    useRef
62. useLayoutEffect           useLayoutEffect
63. useLayoutEffect           useLayoutEffect
64. useImperativeHandle       useImperativeHandle
65. useRef                    useRef
66. useLayoutEffect           useLayoutEffect
67. useLayoutEffect           useLayoutEffect
68. useMemo                   useMemo
69. useContext                useContext
70. useContext                useContext
71. useContext                useContext
72. useContext                useContext
73. useContext                useContext
74. useContext                useContext
75. useContext                useContext
76. useContext                useContext
77. useContext                useContext
78. useContext                useContext
79. undefined                 useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 Error Component Stack
    at RawList (List.js:33:32)
    at OptionList2 (OptionList.js:32:23)
    at div (<anonymous>)
    at PopupContent (PopupContent.js:3:23)
    at div (<anonymous>)
    at DomWrapper4 (DomWrapper.js:10:5)
    at CSSMotion (CSSMotion.js:30:32)
    at DomWrapper4 (DomWrapper.js:13:5)
    at SingleObserver (index.js:10:24)
    at ResizeObserver3 (index.js:12:24)
    at Portal (Portal.js:27:20)
    at Popup (index.js:14:21)
    at Trigger (index.js:33:34)
    at SelectTrigger2 (SelectTrigger.js:52:25)
    at div (<anonymous>)
    at BaseSelect (index.js:31:18)
    at Select (Select.js:61:18)
    at InternalSelect (index.js:38:18)
    at CountrySelector (CountrySelector.tsx:24:7)
    at div (<anonymous>)
    at SelectorOpener (SelectorOpener.tsx:3:34)
    at InputIntlPhoneProvider (InputIntlPhoneContext.tsx:25:3)
    at div (<anonymous>)
    at InputIntlPhone (InputIntlPhone.tsx:14:11)
overrideMethod  @   hook.js:608
updateHookTypesDev  @   react-dom-client.development.js:5665
useContext  @   react-dom-client.development.js:22999
exports.useContext  @   react.development.js:1464
useInputIntlPhoneContext    @   InputIntlPhoneContext.tsx:53
CountryRender   @   CountryRender.tsx:8
(匿名)    @   OptionList.js:369
(匿名)    @   useChildren.js:7
useChildren @   useChildren.js:5
RawList @   List.js:466
react-stack-bottom-frame    @   react-dom-client.development.js:22428
renderWithHooks @   react-dom-client.development.js:5757
updateForwardRef    @   react-dom-client.development.js:7762
beginWork   @   react-dom-client.development.js:10014
runWithFiberInDEV   @   react-dom-client.development.js:543
performUnitOfWork   @   react-dom-client.development.js:15044
workLoopSync    @   react-dom-client.development.js:14870
renderRootSync  @   react-dom-client.development.js:14850
performWorkOnRoot   @   react-dom-client.development.js:14334
performWorkOnRootViaSchedulerTask   @   react-dom-client.development.js:15931
performWorkUntilDeadline    @   scheduler.development.js:44
Environment Info
antd 5.23.3
React 19.0.0
System WSL2
Browser edge
petercat-assistant[bot] commented 5 days ago

The issue you're encountering is related to a change in the order of Hooks called by a component in your React application, specifically within the List component. This can lead to bugs and errors if not addressed. The error message suggests that the order of Hooks is inconsistent between renders, which violates the Rules of Hooks in React.

Here are some steps you can take to troubleshoot and resolve this issue:

  1. Check the Component Logic: Ensure that the logic within your component does not conditionally call Hooks. Hooks should be called in the same order on every render. Avoid placing Hooks inside loops, conditions, or nested functions.

  2. Review the Component Stack: The error stack trace provides a list of components involved in the rendering process. Start by examining the RawList and OptionList2 components, as they are mentioned in the stack trace. Look for any conditional logic that might affect the order of Hook calls.

  3. Update Dependencies: Ensure that all dependencies, including React and Ant Design, are up to date. Sometimes, bugs in libraries can cause unexpected behavior.

  4. Simplify the Component: If possible, try to simplify the component to isolate the issue. Remove parts of the component incrementally to see if the error persists, which can help identify the problematic code.

  5. Consult the Documentation: Review the Rules of Hooks to ensure compliance with best practices.

If you have already checked these aspects and the issue persists, it might be helpful to share a minimal reproducible example or consult the community for further assistance.

🪧 Tips For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.
zombieJ commented 3 days ago

render props 需要返回 func render。不是提供一个 React Component，React 就会自动当成 Component 来渲染的：

-- optionRender={CountryRender}
++ optionRender={props => <CountryRender {...props} />}