React报错Uncaught Invariant Violation: Rendered more hooks than during the previous render.

2020.07.31 - GJX

在一个函数组件加载的时候报错:

Uncaught Invariant Violation: Rendered more hooks than during the previous render.

翻译一下的意思是: 比上次渲染时渲染了更多的钩子。 下面是报错后的一段提示

react-dom.development.js?61bb:506 Warning: React has detected a change in the order of Hooks called by ReportEditor. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. useEffect                  useEffect
3. useContext                 useContext
4. useEffect                  useEffect
5. useContext                 useContext
6. useEffect                  useEffect
7. useContext                 useContext
8. useEffect                  useEffect
9. useContext                 useContext
10. useEffect                 useEffect
11. useContext                useContext
12. useEffect                 useEffect
13. useContext                useContext
14. useEffect                 useEffect
15. useContext                useContext
16. useEffect                 useEffect
17. useContext                useContext
18. useRef                    useRef
19. useEffect                 useEffect
20. useContext                useContext
21. useReducer                useReducer
22. useMemo                   useMemo
23. useRef                    useRef
24. useRef                    useRef
25. useRef                    useRef
26. useLayoutEffect           useLayoutEffect
27. useLayoutEffect           useLayoutEffect
28. useContext                useContext
29. useReducer                useReducer
30. useMemo                   useMemo
31. useRef                    useRef
32. useRef                    useRef
33. useRef                    useRef
34. useLayoutEffect           useLayoutEffect
35. useLayoutEffect           useLayoutEffect
36. useContext                useContext
37. useReducer                useReducer
38. useMemo                   useMemo
39. useRef                    useRef
40. useRef                    useRef
41. useRef                    useRef
42. useLayoutEffect           useLayoutEffect
43. useLayoutEffect           useLayoutEffect
44. undefined                 useCallback
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

结合代码想到可能是因为提前返回造成的两次绑定的usecallback数量不一致,下面是代码

useEffect(() => {
    dispatch(ReportActions.getReportConfig(reportId))
  }, [])
  
  const currentReport = useSelector(makeSelectCurrentDisplay())
  const currentLayerList = useSelector(makeSelectCurrentLayerList())
  const layersOperationInfo = useSelector(makeSelectCurrentLayersOperationInfo())

  if(!currentReport){
    return <></>
  }
  
  const commandLayers = useCallback((operation) => {
    ...
  }, [])

  const selectionChange = useCallback(
    (layerId: number, checked: boolean, exclusive: boolean) => {
      .....
    },
    []
  )

  
  return (
    <div style={{ position: 'fixed', top: 48, bottom: 0, left: 0, right: 0, display: 'flex' }}>
      <ReportAdaptor>
            ....
      </Layout>
      </ReportAdaptor>
    </div>
  )
}

因为通过

if(!currentReport){
     return <>
   }

这句代码执行的时候提前返回了,导致第一次执行没有执行后面的usecallback,第二次执行的时候有callback,两次callback数量不一致导致了这个错误,后面把currentReport是否为空的判断放在return之前&&usecallback定义之后就可以了。

- END -

13
0

已关闭回复!

GWT延迟绑定介绍

GWT的延迟绑定是一种GWT对反射机制的一种支持方案。简单的说就是在使用GWT进行代码开发的时候,可以使用接口 […]