Question

我不确定自己做错了还是误报。我正在组件中调用useEffect和自定义钩子。但是我的控制台出现错误，提示“无效的钩子调用。只能在函数组件的主体内部调用钩子”。这是我的组件代码：

import React, { useEffect } from 'react'

// ... other imports ...

export default function LiveDefects({ match }) {
  const { params : { machineTag } } = match
  const { fetchLiveUpdates } = liveActionCreators 

  const state = useStoreValues(['liveData'])
  const { liveData = {} } = state
  const { fetchLiveUpdatesAction } = useDispatchableActions([
    {
      action : fetchLiveUpdates,
      name   : 'fetchLiveUpdatesAction'
    },
  ])

  useEffect(() => {
    fetchLiveUpdatesAction({ machineTag })
  }, [machineTag])


  return (
    <MainContainer>
      <Header>Live Defects</Header>
      <ul className='grid col-12'>
        <li className='col-4'>
          <div className='col-12 padded-l'>
            <div className='col-12 grid card rounded bordered'>
              <div className='grid-middle grid-center col-12'>
                <img src='https://i.imgur.com/ZccahuC.jpg' alt='le bc' />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </MainContainer>
  )
}

Answer 1

好吧，我发现了问题。我在路由中使用的是render属性，而不是component：

这是我的旧代码：

<Route path='/defect-detection/live-data' render={LiveDefects} />

我将其更新为：

<Route path='/defect-detection/live-data' component={LiveDefects} />

现在一切正常。烦人，但很有意义。

错误的React hooks错误＃321-函数不是React Component Function

1 个答案: