我想在我的 react 应用程序中集成一个 AI 语音助手 Alan AI
所以基本上想使用语音命令重定向页面。
但问题是,我想使用 useHistory 钩子(Hook)的 push 方法来更改页面,但每当我访问变量时,它都是 未定义 , 我不想用 window.location.href
因为它每次都会刷新应用程序,
谁能建议我在哪里错了这个钩子(Hook)/或任何其他替代方案
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
.
关于javascript - react 自定义 Hook 中未定义 useHistory,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66238745/