React-redux useDispatch() 未捕获类型错误
React-redux useDispatch() Uncaught TypeError
我正在尝试创建一个简单的组件来使用 React Redux 钩子分派一个动作 useDispatch
- 我遇到了一个错误。我已将组件修剪到发生错误的位置。当调用useDispatch函数时发生。
import { useDispatch } from 'react-redux'
const MyComp = () => {
useDispatch()
return null
}
export default MyComp
这是我在开发控制台中看到的错误:
Uncaught TypeError: Object(...) is not a function
at MyComp (MyComp.js?cc4c:4)
at renderWithHooks (react-dom.development.js?d018:12938)
at mountIndeterminateComponent (react-dom.development.js?d018:15020)
at beginWork (react-dom.development.js?d018:15625)
at performUnitOfWork (react-dom.development.js?d018:19312)
at workLoop (react-dom.development.js?d018:19352)
at HTMLUnknownElement.callCallback (react-dom.development.js?d018:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js?d018:199)
at invokeGuardedCallback (react-dom.development.js?d018:256)
at replayUnitOfWork (react-dom.development.js?d018:18578)
我进一步削减了它,因此反应树中没有 parents。
const store = configureStore()
ReactDOM.render(
<Provider store={store}>
<MyComp />
</Provider>,
document.getElementById('root')
)
模块版本
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0",
我让它工作了 - 我认为只是停止、构建、重新启动应用程序。我没想到 useDispatch
需要这个,所以我无法解释为什么会有帮助。
注意 - 我确实尝试了 useSelector
并且确实有效,我可以在从 react-redux 导入后将 useSelector 变量输出到控制台(useDispatch 的 console.log 未定义)。那时我可以说我使用的是正确版本的 React,这可能是我系统的问题。
所以,如果您遇到类似的问题。尝试重新启动完整的 React 应用程序。确认您正在加载正确版本的 React。
就我而言,我在做:
import { useDispatch } from 'react'
而不是:
import { useDispatch } from 'react-redux'
♂️
我正在使用 @reduxjs/toolkit
,并假设 react-redux
已经安装。
我遇到了类似的问题,解决方法是更新 "react-redux"。
最初的package.json是这样的:
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^6.0.1",
安装后问题消失react-redux@7.2.0
从
升级
"react-redux": "6.0.1",
到
"react-redux": "7.2.0",
帮我修好了
运行 npm outdated
概览,然后npm update react-redux
更新redux
我用 "@reduxjs/toolkit": "^1.5.0",
我通过删除 "react-redux": "^7.2.2"
来解决这个问题
我正在尝试创建一个简单的组件来使用 React Redux 钩子分派一个动作 useDispatch
- 我遇到了一个错误。我已将组件修剪到发生错误的位置。当调用useDispatch函数时发生。
import { useDispatch } from 'react-redux'
const MyComp = () => {
useDispatch()
return null
}
export default MyComp
这是我在开发控制台中看到的错误:
Uncaught TypeError: Object(...) is not a function
at MyComp (MyComp.js?cc4c:4)
at renderWithHooks (react-dom.development.js?d018:12938)
at mountIndeterminateComponent (react-dom.development.js?d018:15020)
at beginWork (react-dom.development.js?d018:15625)
at performUnitOfWork (react-dom.development.js?d018:19312)
at workLoop (react-dom.development.js?d018:19352)
at HTMLUnknownElement.callCallback (react-dom.development.js?d018:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js?d018:199)
at invokeGuardedCallback (react-dom.development.js?d018:256)
at replayUnitOfWork (react-dom.development.js?d018:18578)
我进一步削减了它,因此反应树中没有 parents。
const store = configureStore()
ReactDOM.render(
<Provider store={store}>
<MyComp />
</Provider>,
document.getElementById('root')
)
模块版本
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0",
我让它工作了 - 我认为只是停止、构建、重新启动应用程序。我没想到 useDispatch
需要这个,所以我无法解释为什么会有帮助。
注意 - 我确实尝试了 useSelector
并且确实有效,我可以在从 react-redux 导入后将 useSelector 变量输出到控制台(useDispatch 的 console.log 未定义)。那时我可以说我使用的是正确版本的 React,这可能是我系统的问题。
所以,如果您遇到类似的问题。尝试重新启动完整的 React 应用程序。确认您正在加载正确版本的 React。
就我而言,我在做:
import { useDispatch } from 'react'
而不是:
import { useDispatch } from 'react-redux'
♂️
我正在使用 @reduxjs/toolkit
,并假设 react-redux
已经安装。
我遇到了类似的问题,解决方法是更新 "react-redux"。 最初的package.json是这样的:
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^6.0.1",
安装后问题消失react-redux@7.2.0
从
升级"react-redux": "6.0.1",
到
"react-redux": "7.2.0",
帮我修好了
运行 npm outdated
概览,然后npm update react-redux
更新redux
我用 "@reduxjs/toolkit": "^1.5.0", 我通过删除 "react-redux": "^7.2.2"
来解决这个问题