未捕获TypeError的React-redux useDispatch()
基础概念
useDispatch() 是 React-Redux 库中的一个 Hook，用于在函数组件中获取 Redux store 的 dispatch 方法。dispatch 方法用于触发 Redux actions，从而更新应用的状态。
相关优势
- 简化状态管理：通过
useDispatch()和useSelector()，可以方便地在函数组件中进行状态管理和数据获取。 - 类型安全：结合 TypeScript，可以提供更好的类型检查和自动补全功能。
- 性能优化：React-Redux 的 Hooks API 设计考虑了性能优化，避免了不必要的渲染。
类型
useDispatch() 返回一个函数，这个函数就是 Redux store 的 dispatch 方法。
应用场景
在函数组件中使用 Redux 进行状态管理时，通常会用到 useDispatch() 和 useSelector()。
常见问题及解决方法
未捕获 TypeError 的 useDispatch()
问题描述：在使用 useDispatch() 时，可能会遇到 TypeError，这通常是因为 useDispatch() 被错误地使用在不支持 Hooks 的环境中，或者 Redux store 没有正确配置。
原因：
- 不支持 Hooks 的环境：
useDispatch()只能在 React 函数组件或自定义 Hooks 中使用，不能在类组件或普通 JavaScript 函数中使用。 - Redux store 配置错误：如果 Redux store 没有正确配置，
useDispatch()可能会返回undefined，从而导致TypeError。
解决方法：
- 确保在函数组件中使用：
- 确保在函数组件中使用：
- 确保 Redux store 正确配置：
- 确保 Redux store 正确配置：
- 检查依赖版本：确保
react-redux和redux的版本兼容。
参考链接
通过以上步骤，可以有效地解决未捕获 TypeError 的 useDispatch() 问题，并确保在 React-Redux 应用中正确使用 useDispatch()。
相关·内容
1回答
在我的React代码库中，我集成了Redux工具react-redux，并使用useDispatch钩子从我的视图中分派操作。我只是有一个问题，我不能访问更新后的值刚刚更新的商店。是否有一种方法可以让我像await一样等待状态更新的完成，或者类似于一个回调，在那里我可以执行其他代码？
我的代码是这样的：
import React from 'react';
import { useDispatch } from "react-redux";
import { setCore } from "../store/global";
// the va
浏览 1提问于2019-11-12得票数 8
我有一个自定义钩子，它调用一个saga函数，然后在测试这个函数im获取时调用一个axios。
TypeError:未定义不是一个函数
我只想测试这个函数是否被调用了。
postsHook.test.tsx
import { renderHook } from "@testing-library/react-hooks";
import usePostsHook from "./postsHook";
import { initCommentUpdates, getPostsInit } from "../actions/postActions"
浏览 0提问于2020-05-14得票数 0
回答已采纳
我的产品组件中有这些配置：
import axios from "axios";
import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import { connect } from "react-redux";
import productsAction from "../redux/actions/productsAction";
import { FETCH_PRODUCTS } from &#
浏览 3提问于2022-03-25得票数 0
我正在使用redux-工具箱，并且希望通过不必在每个分派异步操作之后调用unwrapResult来减少代码重复。我通过向用户显示一条土司消息来处理所有分派操作的错误，因此我需要根据redux工具包展开包装。
理想情况下，我希望使用如下所示的钩子包装从useDispatch()函数返回的returned中的分派函数.
// Example of wrapped dispatch function
function SomeComponent() {
const dispatch = useWrappedAppDispatch()
return (
<button
浏览 8提问于2022-10-11得票数 0
2回答
分派不是带有的函数反应测试库
、、、、
我想测试组件是否向商店分派了一个操作，为此，我不得不模拟React的功能。
我使用useDispatch钩子获取dispatcher函数，并将其放入变量中，以便它们能够调用它。
当我运行测试时，即使模拟了useDispatch函数，它也会返回一个错误，说明它不是一个函数。
jest.mock('react-redux', () => ({
useSelector: jest.fn(),
useDispatch: jest.fn(() => {}),
}));
it('should be able open modal', () =>
浏览 3提问于2020-04-09得票数 4
回答已采纳
我试图创建一个简单的组件来使用React Redux钩子useDispatch来分派一个操作--但是我得到了一个错误。我已经将组件裁剪到发生错误的位置。当调用useDispatch函数时，就会发生这种情况。 import { useDispatch } from 'react-redux'
const MyComp = () => {
useDispatch()
return null
}
export default MyComp 这是我在dev控制台中看到的错误： Uncaught TypeError: Object(...) is not a func
浏览 69提问于2019-07-31得票数 8
回答已采纳
我正在尝试使用react-redux向我的后端发出get请求，当我查看redux dev工具时，我看到状态被更新，产品被放入状态中(这很好)，但当我试图映射产品或它给我的console.log(products)时，我没有定义，我遵循了一个教程，我完全像教师一样做了，这是我的代码，我做错了什么？ import { useDispatch, useSelector } from "react-redux";
import { listProducts } from "../../actions/productActions";
const Home = ()
浏览 11提问于2021-01-14得票数 0
当我从me调用app.tsx thunk时，它返回以下错误：
> Build error occurred
TypeError: Cannot read property 'useContext' of null
at exports.useContext (/Users/kukodajanos/Workspace/Tikex/Portal/Team/node_modules/react/cjs/react.production.min.js:24:118)
at useReduxContext (/Users/kukodajanos/Workspace/
浏览 13提问于2022-05-09得票数 1
react-redux库提出了useDispatch，它是一个只能在函数组件中使用的钩子。
import React from 'react';
import {useDispatch} from 'react-redux';
import {action} from './actions';
const funComp = () => {
const dispatch = useDispatch();
const performAction = () => { dispatch(action()) }
return &
浏览 2提问于2020-07-09得票数 0
大家好，我对编码很陌生，我现在正努力让我的应用程序与复选框(字符串)过滤器一起工作。
代码链接：
这是代码的图片。
所以API可以工作，但是右边的过滤器不能工作。
我希望用户在搜索框中搜索一些东西。然后使用右边的过滤器/复选框过滤出他想要搜索的单词，而不是搜索完整的句子。因此，选中的复选框将更新搜索框，以便创建一个精化的搜索结果。
Searchview.jsx
import React from 'react'
import { useSelector } from 'react-redux'
function SearchResults() {
const
浏览 9提问于2022-04-07得票数 0
当我和TypeError: functionName is not a function一起叫它的时候，我会得到它。初始state以空数组的形式返回法线。这是我的密码：
操作：
export const getTopStories = () => async (dispatch) => {
try {
const { data } = await axios.get('http://news-site.com/api');
dispatch({
type: GET_TOP_STORIES,
payload: da
浏览 2提问于2020-12-31得票数 0
回答已采纳
2回答
我试图在组件的呈现函数中使用useDispatch。
import { useDispatch } from 'react-redux';
我有一个输入试图在useDispatch on onChange
onChange={() => useDispatch()(update("test"))}
当onChange被触发时，我会得到以下错误：
无效钩子呼叫。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React和呈现器的版本不匹配(例如React )。
你可能违反了胡克斯的规则
在同一个应用程序中，可能有多
浏览 7提问于2019-10-15得票数 4
回答已采纳
我在使用ReduxToolkit错误的对象时遇到了问题: TypeError: createEntityAdapter (...)不是函数
供应商切片:从'@reduxjs/toolkit‘导入{ createSlice，createAsyncThunk，createEntityAdapter }从' axios’导入axios
export const getSupplierData = createAsyncThunk(
'supplier/getSupplierData', async () => {
const respon
浏览 0提问于2020-07-27得票数 0
1回答
我有一个函数组件，我想用jest编写测试。但我无法评估结果。我应该如何为这样的组件编写测试？下面是我要测试的组件：
import React from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import ExpenseForm from "./ExpenseForm";
import { addExpense } from "../store/expenses/a
浏览 7提问于2021-12-29得票数 0
回答已采纳
我试图为我的react原生应用程序使用react-redux，但不知何故出现了这个问题
error: bundling failed: Error: Unable to resolve module `./hooks/useDispatch` from `C:\Users\TF\lesson\node_modules\react-redux\lib\index.js`: The module `./hooks/useDispatch` could not be found from `C:\Users\TF\lesson\node_modules\react-redux\lib\index.j
浏览 1提问于2019-07-08得票数 4
我正在使用match.params从后端获得单个产品的id，但是我得到了错误，请帮助我解决这个错误。
import React, { useEffect } from "react";
import Carousel from "react-material-ui-carousel";
import "./ProductDetail.css";
import { useSelector, useDispatch } from "react-redux";
import { getProductDetails } from "
浏览 15提问于2022-11-01得票数 0
我在这个领域很新，我在很多地方都找过了，但找不到解决办法。我得到错误"TypeError:无法读取未定义的属性‘图像’“。我不知道错误的problem.The图像在哪里。
有错误的类在这里。
import React, {useEffect} from 'react';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { detailsProduct } from
浏览 4提问于2020-06-02得票数 0
回答已采纳
1回答
React :未定义的还原剂作用
、、、、
我做了增量和递减计数器按钮，我使用redux来触发增量和递减的操作，但是我得到了"Counter.js:11 Uncaught TypeError:无法通过单击按钮读取未定义的(读取‘添加’)的属性“错误。
这是密码：-
store.js
const counterSlice = createSlice({
name: "counter",
initialState: {
countNumber: 0,
countToggle: true,
},
reducers: {
addition(s
浏览 5提问于2022-10-07得票数 0
回答已采纳
2回答
数组在使用酶呈现的组件中未定义？
、、、、
我有一个简单的组件，它使用useSelector和useDispatch钩子从我的redux存储中分派和获取当前状态，并在它们上映射以返回子组件。 我刚开始使用钩子进行测试，在阅读了一些文章之后，我用jest mock模拟了两个redux钩子，以查看它们在挂载时是否被调用，但是，在运行测试时，我的状态数组返回为未定义，因此测试失败。有人知道为什么会这样吗？ COMPONENT.tsx import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from '
浏览 34提问于2020-12-07得票数 1
我正在尝试使用react-redux钩子，但是我得到了错误：
TypeError：(0，_reactRedux.useDispatch)不是函数
有什么想法吗？
...
import { useDispatch, useSelector } from "react-redux";
import { StackActions, NavigationActions } from "react-navigation";
import CustomImage from "./CustomImage";
const VideoEpisode = pr
浏览 2提问于2020-03-05得票数 3
回答已采纳
我试图通过useDispatch方法更新redux中的商店，但是我收到了这样的消息：
试图导入错误：“useDispatch”不是从“redux”导出的。
我使用这个方法来调用操作来更新我的商店。
import { useDispatch } from 'react-redux';
import { loggedInAction } from './redux';
const userInfo = () => {
const dispatch = useDispatch();
const loggedIn = user => dispatc
浏览 1提问于2019-06-10得票数 19
回答已采纳
我试图在一个特定的测试中模拟useDispatch。我试着这样模仿： import * as reactRedux from "react-redux"; const useDispatchMock = jest.spyOn(reactRedux, "useDispatch"); 在运行测试时，useDispatch仍然是一个正常的函数。 使用Jest 26.6.3 React Redux 7.2.4
浏览 83提问于2021-08-26得票数 0
回答已采纳
2回答
我是一个在redux中的新手，正在尝试将一项添加到篮中，但正在获取，TypeError:无法读取未定义的属性(读取'getState')。为什么我不能得到州有什么我需要做的事情，没有做，请我做什么我没有做好。我正在使用useDispatch钩子读取存储并分派操作
嘿，这是我的密码
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
items: [],
}
export const basketSlice = createSlice({
name: &#
浏览 7提问于2022-03-22得票数 0
回答已采纳
在使用TypeError修复了“未定义的const { id } = useParams();：无法读取未定义的属性(读取'params')”之后，我就有了这个错误。
ProductDetail.jsx
import React, { Fragment, useEffect } from 'react';
import Carousel from "react-material-ui-carousel";
import "./ProductDetails.css";
import {useSelector, useDispatch
浏览 1提问于2022-06-16得票数 1
我对此完全不熟悉。我花了几个小时来解释这件事。基本上，我试图复制一个项目来理解主要概念。在项目中，代码显然工作得很好，但是我收到了一个"TypeError: Cannot read properties of undefined (reading 'search')“错误。我希望这里有人能给我解释一下，我错过了什么。
我认为错误来自以下代码行：
SigninScreen：
const redirect = props.location.search
? props.location.search.split("=")[1]
: "/"
浏览 41提问于2021-12-02得票数 2
我刚开始进行反应测试，我试着用这段代码验证是否存在，但出于某种原因，它在抱怨其他一些东西-- TypeError: getItems props.action不是一个函数
对此有任何帮助/建议，以验证组件是否存在？
interface SelectionListProps {
actionArgs?: string | undefined;
action: string;
name?: string;
identifier?: string;
classes: {
button_basic: string;
formControl: string;
浏览 4提问于2021-10-28得票数 0
回答已采纳
我使用JS做过一些React的工作，但是现在我正在创建一个新的项目来学习使用类型记录来做出反应。当我使用JS并需要使用dispatch时，我只是从redux导入了useDispatch：
import { useDispatch, useSelector } from 'react-redux';
const AuthAppBar = () => {
const dispatch = useDispatch();
const isUserLogged = useSelector(authSelector.isUserLogged);
const { event
浏览 3提问于2021-05-09得票数 7
回答已采纳
错误
未明TypeError: Object(.)不是一个函数
import { useSelector, useDispatch, useRef } from 'react-redux'
const mounted = useRef();
useEffect(() => {
console.log('mounted', mounted)
console.log('useEffect props:', props)
我有一个函数组件，并试图利用钩子来使用componentDidUpdate，在我
浏览 1提问于2020-11-27得票数 2
React "useDispatch“在函数"loginForm”中被称为“loginForm”，它既不是React函数组件，也不是自定义的React函数react钩子/规则的钩子。
我收到这样的信息。附加密码..。
import React from 'react'
import { useDispatch} from 'react-redux'
const loginForm = () => {
const dispatch = useDispatch()
return (
<div>lgoinFor
浏览 6提问于2020-07-08得票数 1
回答已采纳
代码看起来很好，但是它会产生这个错误。它说，TypeError:无法读取属性“长度”的空在反应项目。我已经张贴了下面的代码。我正在使用React来构建这个。救命求你了。
import React, {useEffect} from 'react'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { Row, Col, ListGroup, Image, Form, Button, C
浏览 5提问于2021-05-27得票数 2
回答已采纳
我有多个调制解调器，显示和隐藏它们的条件存储在Redux存储中。为了避免打字，我导出这样的动作.
//reduxStuff.js
export const modalNameHide = () => {
return { type: "MODALNAMEHIDE" };
};
export const modalNameShow = () => {
return { type: "MODALNAMESHOW" };
};
当我需要隐藏模式的功能时，我会这样做.
//HideModalButton.js
import { modalNam
浏览 3提问于2020-02-18得票数 0
回答已采纳
我对一些错误有意见。我已经试着解决这个问题一个星期了，但我还是找不到问题.
未定义的TypeError:无法对“match.parse”的属性“用户名”进行重构，因为它没有定义。
import React, { useEffect } from 'react';
import qs from 'qs';
import { withRouter } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import PostL
浏览 1提问于2022-02-24得票数 0
我正在将redux项目的react从类组件转换到钩子。
为了分派操作，我正在从react-redux导入{ useDispatch }。
然后，在每个功能组件中，我都有
const dispatch = useDispatch();
然后
dispatch(someAction())
这是正确的处理方法吗?还是应该将const dispatch = useDispatch()抽象到一个单独的文件中并始终重用？
谢谢
浏览 10提问于2020-05-22得票数 1
回答已采纳
3回答
如何制作电子两个窗口的存贮
、、、、
我用react制作了两个不同的窗口，并提供了相同的商店。但是，如果我在一个窗口中存储数据，则第二个窗口不会更改。并且idk知道如何同步。(所有的还原器和作为默认反应项目所做的动作)
First provide(index.js):
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import store from "../re
浏览 6提问于2020-10-30得票数 5
1回答
使用jest时，我想检查函数是否被调用，分派方法是否在我的函数组件中调用。我无法创建间谍函数，因为它是一个功能组件，并且我没有访问实例对象的权限。
import React, { Component } from 'react';
import { useDispatch } from 'react-redux';
import styles from './style.module.scss';
const AddTask = () => {
const dispatch = useDispatch();
const han
浏览 3提问于2021-02-23得票数 0
回答已采纳
为什么我们不能在有状态组件中使用钩子UseDispatch？
import { useDispatch } from "react-redux";
import { submitData } from "../state/actions";
class FormComponent extends Component {
constructor(props) {
super(props);
this.state = {
fields: {},
errors: {}
};
}
submitForm
浏览 7提问于2019-10-31得票数 0
回答已采纳
我对测试很陌生，我想对我的单元测试用例遵循干燥原则。在我的测试用例中，我在模拟redux的useSelector和useDispatch，并且目前在所有使用react的测试中都编写了相同的模拟。下面是我的一个测试用例。
import React from 'react';
import { shallow } from 'enzyme';
import LayoutComponent from './LayoutComponent';
const mockDispatch = jest.fn();
jest.mock('react-r
浏览 4提问于2020-09-21得票数 2
回答已采纳
如何测试useEffect是否在挂载时使用requestMovies调用dispatch？ import { useDispatch } from 'react-redux';
export const requestMovies = page => ({
type: MoviesTypes.REQUEST_MOVIES,
page,
});
const MoviesShowcaseList = () => {
const { page } = useShallowEqualSelector(state => state.movies);
浏览 24提问于2019-09-10得票数 3
我得到了类似于TypeError的错误:无法读取BookingCar.js页面中未定义的属性(读取'params')，我的错误图像和代码是
App.js代码是
import "./App.css";
import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
import Home from "./pages/Home";
import Login from "./pages/Login";
i
浏览 8提问于2021-12-14得票数 1
回答已采纳
为什么我的应用程序只显示加载屏幕？当我运行我的应用程序比它唯一的加载，不显示其他屏幕和显示警告
警告可能未处理的承诺拒绝(id: 0)：TypeError:未定义的is
我想这段代码有问题
import React, { useEffect } from 'react';
import { View, ActivityIndicator, StyleSheet} from 'react-native';
import { AsyncStorage } from '@react-native-async-storage/async-storage'
浏览 6提问于2022-11-18得票数 0
回答已采纳
2回答
我有这样的组成部分：
import React, { Component } from "react";
import { connect } from "react-redux";
import { setInterestsSelectionCriteria } from "../../api/calls/data/ads/ads-configuration";
export class AdsConfiguration extends Component {
constructor(props) {
super(props);
浏览 5提问于2022-02-16得票数 0
回答已采纳
我不能在useEffect内部使用分派，只要我添加该行，它就显示了这个错误
import { useDispatch } from 'react-redux'
import db from '../firebase'
import setProjects from '../features/projects/projectSlice'
function Home (){
const dispatch = useDispatch();
let projects = [];
useEffect(() => {
浏览 0提问于2021-10-20得票数 0
回答已采纳
当我使用redux时，我得到了以下错误： TypeError: react__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function 我该如何解决这个问题？我已经添加了下面的代码。 正在下面的组件中调用dispatch() import authAction from "../store/Auth";
import { useDispatch } from "react-redux";
const useStyles = makeStyles((theme) => ({
root: {
浏览 63提问于2021-09-12得票数 1
回答已采纳
在useEffect中使用分派时，我有一个无限的分派。
import React, { useEffect } from "react"
import TodoItem from "./TodoItem"
import { useDispatch, useSelector } from "react-redux"
import { getTodos } from "../redux/actions"
const TodoList = () => {
const dispatch = useDispatch()
us
浏览 2提问于2021-01-22得票数 0
下面是我获得标题中提到的错误的代码块。我们是否需要将分派传递给子组件。(我的所有子组件都是功能组件)
import { useDispatch } from "react-redux";
export function ApproveModal(props) {
const setApprovedDecision = () => {
useDispatch({ type: SUBMIT_DECISION , payload: props.decisionData});
};
return (
<Button buttonStyle=&#
浏览 2提问于2021-08-17得票数 2
回答已采纳
1回答
我对编写测试用例非常陌生，我正在尝试用jest，酶/反应测试库来编写测试用例，我无法测试这个组件，.If失败了，有人可以帮助我预先为下面的代码.Thank you编写测试。我已经附上了测试用例，因为well.If发现的错误确实帮助我解决了它。用开玩笑、酶或反应库的测试用例什么都行，我还在学习阶段。
header.js
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { Link } from "react-rou
浏览 27提问于2022-01-07得票数 1
当我访问FeedbackDetails页面时，最初没有问题，因为从上一页(主页)加载的状态仍然可用。但是，当我试图刷新页面时，它会返回一个错误：TypeError:无法重构“反馈”的属性“title”，因为它是未定义的.
这是密码：-
主页
import React, { useEffect } from "react";
import Header from "../components/Home/Header/Header";
import Main from "../components/Home/Main/Main";
import {
浏览 4提问于2021-09-25得票数 0
我构建了一个Pokedex，运行良好，但是，我在React-Redux Dev工具中看到了一个“问题”： ? "getPokemonsInfo“在"getPokemonsUrls”之前被调用，但是，"getPokemonsInfo“应该只在状态的属性发生变化时调用(使用useEffect())，而这种情况发生在"getPokemonsUrls”中。 import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-r
浏览 6提问于2021-01-23得票数 1
回答已采纳
当我使用react("react-redux": "^7.2.2")从服务器获取数据后进行反路径操作，如下所示：
import axios from 'axios';
import store from "../store";
import { getArticle } from "../action/ArticleAction";
import { useDispatch } from 'react-redux';
export function requestWithAction(confi
浏览 3提问于2022-08-05得票数 0
下面是我的部分。
import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { postJobAction } from './redux/postJobActions';
const PostJobComponent = () => {
const dispatch = useDispatch();
const onPostJobSubmit = (eve
浏览 1提问于2021-07-02得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
