React-redux useDispatch() Uncaught TypeError

Posted 2023-02-19

【中文标题】React-redux useDispatch() Uncaught TypeError

【英文标题】：

【发布时间】：2019-12-08 04:51:08

【问题描述】：

我正在尝试创建一个简单的组件来使用 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)

我已将其进一步修剪，因此反应树中没有父母。

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",

【问题讨论】：

我遇到了同样的问题，我通过安装github.com/facebookincubator/redux-react-hook解决了它

你能登录useDispatch（不是useDispatch()），看看它是什么样的对象？否则，唯一可能破坏的将是configureStore。你能包括这个的代码吗？也许尝试使用简单的createStore(() => ()) 来进一步查明问题

您确定您的node_modules 中安装了完全相同的 React 和 ReactDOM 版本，并且那里没有其他 React 或 ReactDOM 副本吗？使用钩子的大多数问题归结为加载了多个 React 副本。此外，任何内置的 React 钩子都会发生这种情况，例如 useState() ？

【参考方案1】：

我使用“@reduxjs/toolkit”：“^1.5.0”， 我通过删除 "react-redux": "^7.2.2"

来解决这个问题

【参考方案2】：

升级自

"react-redux": "6.0.1",

到

"react-redux": "7.2.0",

帮我修好了

运行npm outdated 进行概述，然后运行npm update react-redux 更新redux

【参考方案3】：

我遇到了类似的问题，解决方法是更新“react-redux”。 最初的 package.json 是这样的：

"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^6.0.1",

安装react-redux@7.2.0后问题消失

【参考方案4】：

我正在使用@reduxjs/toolkit，并假设react-redux 已安装。

【参考方案5】：

就我而言，我正在做：

import  useDispatch  from 'react'

代替：

import  useDispatch  from 'react-redux'

?‍♂️

【讨论】：

天哪，我也是！感谢您发布 :)) 我相信这个错误会很受欢迎！

100%！！！这也是我的问题。 OMG，这个错误很难追查，因为错误太笼统了，更新你的版本是一个红鲱鱼。啊！谢谢@zgreen。

【参考方案6】：

我让它工作了 - 我认为只需停止、构建、重新启动应用程序。我没想到useDispatch 需要这个，所以我无法解释为什么会有帮助。

注意 - 我确实尝试过 useSelector 并且确实有效，我可以在从 react-redux 导入后将 useSelector 变量输出到控制台（useDispatch 的 console.log 未定义）。那时我可以看出我使用的是正确版本的 React，这可能是我系统的问题。

所以，如果您遇到类似的问题。尝试完全重启应用程序。确认您正在加载正确版本的 react。