javascript - 反应自定义 Hook 中未定义 useHistory
问题描述
我想在我的反应应用程序中集成一个 AI 语音助手 Alan AI
所以基本上想使用语音命令重定向页面。
但问题是,我想使用 useHistory 钩子的推送方法来更改页面,但是每当我访问未定义的变量时,我不想使用window.location.href
它,因为它每次都会刷新应用程序,
谁能建议我在哪里错了这个钩子/或任何其他替代方案
import { useCallback, useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { useCartContext } from "../context/cart_context";
import { useThemeContext } from "../context/theme_context";
import alanBtn from "@alan-ai/alan-sdk-web";
const COMMANDS = {
OPEN_CART: "open-cart",
TOGGLE_THEME: "toggle-theme",
};
const useAlan = () => {
let history = useHistory();
const { theme, toggleTheme } = useThemeContext();
const { cart } = useCartContext();
const [alanInstance, setAlanInstance] = useState(null);
const openCart = useCallback(() => {
if (cart.length < 1) {
alanInstance.playText("cart is empty");
return;
}
alanInstance.playText("opening cart");
history.push("/cart");
// window.location.href = "/cart";
}, [alanInstance]);
const changeTheme = useCallback(() => {
alanInstance.playText("changing theme");
toggleTheme();
});
useEffect(() => {
window.addEventListener(COMMANDS.OPEN_CART, openCart);
window.addEventListener(COMMANDS.TOGGLE_THEME, changeTheme);
return () => {
window.removeEventListener(COMMANDS.OPEN_CART, openCart);
window.removeEventListener(COMMANDS.TOGGLE_THEME, changeTheme);
};
}, [openCart, changeTheme]);
useEffect(() => {
// history.push("/cart");
// this also gives same error
if (alanInstance != null) return;
setAlanInstance(
alanBtn({
key: process.env.REACT_APP_ALAN_KEY,
onCommand: ({ command }) => {
window.dispatchEvent(new CustomEvent(command));
},
})
);
}, []);
return null;
};
export default useAlan;
一切正常,检测到语音并运行 openCart 函数,只是history
未定义
错误:
TypeError: Cannot read property 'push' of undefined
(anonymous function)
C:/Users/Sachin Verma/Desktop/Web Dev/React-E-Commerce-v2/src/hooks/useAlan.js:28
25 | }
26 | alanInstance.playText("opening cart");
27 |
> 28 | history.push("/cart");
| ^ 29 | // window.location.href = "/cart";
30 | }, [alanInstance]);
31 |
App.js 代码:
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { useThemeContext } from "./context/theme_context";
import useAlan from "./hooks/useAlan";
import { Navbar, Sidebar, Footer } from "./components";
import {
Home,
SingleProduct,
Cart,
Checkout,
Error,
About,
Products,
PrivateRoute,
AuthWrapper,
Scan,
History,
ItemList,
} from "./pages";
function App() {
const { theme } = useThemeContext();
useAlan();
useEffect(() => {
if (theme === "dark-theme") {
// set dark mode theme
document.documentElement.className = "dark-theme";
} else {
// remove dark mode
document.documentElement.className = "light-theme";
}
}, [theme]);
return (
<AuthWrapper>
<Router>
<Navbar />
<Sidebar />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route exact path="/about">
<About />
</Route>
<Route exact path="/cart">
<Cart />
</Route>
<Route exact path="/products">
<Products />
</Route>
<PrivateRoute exact path="/history">
<History />
</PrivateRoute>
<PrivateRoute exact path="/scan">
<Scan />
<ItemList />
</PrivateRoute>
<Route exact path="/products/:id" children={<SingleProduct />} />
<PrivateRoute exact path="/checkout">
<Checkout />
</PrivateRoute>
<Route path="*">
<Error />
</Route>
</Switch>
<Footer />
</Router>
</AuthWrapper>
);
}
export default App;
解决方案
当您没有将应用程序正确嵌套在为对象Router
提供上下文的有效history
对象中时,就会发生这种情况。确保将您的顶级代码放在适当的Router
对象上下文中:
import { BrowserRouter } from "react-router-dom";
function App() {
return (
<BrowserRouter>
...(components that use react-router-hooks)
</BrowserRouter>
);
}
React-Native 也是如此:NativeRouter
.
推荐阅读
- caching - 轮询不工作时更新 Apollo 客户端 3 的缓存
- c++ - 如何在 C++11 中安全且可移植地创建和使用临时文件?
- java - 想要对应用程序进行编程以连接到蓝牙设备
- numeric - r 考试类型编号:答案 Inf
- html - Flexbox,盒子里面的盒子
- vue.js - 有条件地将事件侦听器和处理程序附加到 Vue 组件
- typescript - Jasmine/Typescript - 使用“this”变量
- lisp - 在常见的 lisp 中,您如何在未捕获错误的地方重新启动?
- python - 如何递归地遍历 2 个字典,并根据另一个修改原始字典?
- javascript - Javascript 使用过滤器问题过滤对象数组