javascript - I got the problem in using React Hook - useDispatch() - Stack Overflow

admin管理员组

文章数量:1022727

React Hook "useDispatch" is called in function "loginForm" which is neither a React function ponent or a custom React Hook function react-hooks/rules-of-hooks

I got this kind of message. Attached code...

import React from 'react'
import { useDispatch} from 'react-redux'

const loginForm = () => {
  const dispatch = useDispatch()
  
  return (
    <div>lgoinForm</div>
  )
}

export default loginForm

React Hook "useDispatch" is called in function "loginForm" which is neither a React function ponent or a custom React Hook function react-hooks/rules-of-hooks

I got this kind of message. Attached code...

import React from 'react'
import { useDispatch} from 'react-redux'

const loginForm = () => {
  const dispatch = useDispatch()
  
  return (
    <div>lgoinForm</div>
  )
}

export default loginForm

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Jul 8, 2020 at 13:10 skyboyer 23.8k77 gold badges6262 silver badges7171 bronze badges asked Jul 8, 2020 at 3:57 Brian WangBrian Wang 8311 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Rename loginForm to LoginForm (ponent should start with a capital letter).

I have tested your code and it works fine after naming the ponent correctly.

Read here and here

You can make the loginForm to useLoginForm it should be a custom hook name starting with use keyword.

React Hook "useDispatch" is called in function "loginForm" which is neither a React function ponent or a custom React Hook function react-hooks/rules-of-hooks

I got this kind of message. Attached code...

import React from 'react'
import { useDispatch} from 'react-redux'

const loginForm = () => {
  const dispatch = useDispatch()
  
  return (
    <div>lgoinForm</div>
  )
}

export default loginForm

React Hook "useDispatch" is called in function "loginForm" which is neither a React function ponent or a custom React Hook function react-hooks/rules-of-hooks

I got this kind of message. Attached code...

import React from 'react'
import { useDispatch} from 'react-redux'

const loginForm = () => {
  const dispatch = useDispatch()
  
  return (
    <div>lgoinForm</div>
  )
}

export default loginForm

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Jul 8, 2020 at 13:10 skyboyer 23.8k77 gold badges6262 silver badges7171 bronze badges asked Jul 8, 2020 at 3:57 Brian WangBrian Wang 8311 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Rename loginForm to LoginForm (ponent should start with a capital letter).

I have tested your code and it works fine after naming the ponent correctly.

Read here and here

You can make the loginForm to useLoginForm it should be a custom hook name starting with use keyword.

本文标签： javascriptI got the problem in using React HookuseDispatch()Stack Overflow