![](/img/trans.png)
[英]Unhandled Rejection (TypeError): Cannot destructure property 'setUser' of 'Object(...)(...)' as it is undefined
[英]TypeError: Cannot destructure property 'setUser' of 'Object(...)(...)' as it is undefined
我在 web 頁面中設置用戶時遇到問題。 我使用 AppContext 來更新狀態的所有組件。當我運行我的代碼時,它說 setUser 是未定義的,但我在 AppContext 中定義並在 App.jsx 中導入。 任何人都可以幫忙嗎? 我看到了其他解決方案,似乎 const { setUser } = useContext(AppContext); 必須脫離組件,但顯示錯誤。 這是錯誤:
TypeError: Cannot destructure property 'setUser' of 'Object(...)(...)' as it is undefined.
App
D:/ELEARNING/PROYECTS/PROYECT-ANDREA/store-lopez-andrea/src/App.js:11
8 | import { Router } from "./routers/Router";
9 |
10 | function App() {
> 11 | const { setUser } = useContext(AppContext);
12 | useEffect(() => {
13 | getUser().then((user) => {
14 | setUser(user);
這是 App.jsx
import "./App.css";
import { Header } from "./components/header/Header";
import { Nav } from "./components/nav/Nav.jsx";
import { getUser } from "./services/users";
import { AppContext } from "./context/AppContext";
import { Notification } from "./components/notification/Notification";
import { Router } from "./routers/Router";
function App() {
const { setUser } = useContext(AppContext);
useEffect(() => {
getUser().then((user) => {
setUser(user);
});
}, [setUser]);
return (
<div>
<Notification />
<Nav />
<Header />
<Router />
<AppContext />
</div>
);
}
export default App;
這是 AppContext.jsx
import React,{ useState } from "react";
import { usePagination } from "../components/utils/pagination.jsx";
export const AppContext = React.createContext();
export default function AppProvider({ children }) {
const [user,setUser] = useState({})
const [points, setPoints] = useState(0)
const [products, setProducts] = useState([])
const [reedemStatus, setReedemStatus] = useState({})
const [history, setHistory] = useState([])
const paginationList = usePagination(products, 16)
const paginationHistoryList = usePagination(history, 16)
const totalProducts = products.length
const totalHistory = history.length
const handlerAddPoint =(value)=>{
const newUser = {...user}
newUser.points = user.points + value
setUser(newUser)
}
const handlerSubtractPoint =(points)=>{
const newUser = {...user}
newUser.points = user.points - points
setUser(newUser)
}
return(
<AppContext.Provider value={{user,
setUser,
handlerAddPoint,
handlerSubtractPoint,
points,
setPoints,
products,
setProducts,
totalProducts,
paginationList,
reedemStatus,
setReedemStatus,
history,
setHistory,
paginationHistoryList,
totalHistory}}>
{children}
</AppContext.Provider>
);
}
在 Users.jsx 我有“getUser”組件
import {BASE_URL, headers} from "./constant"
export const getUser = async()=>{
try{
const response= await fetch(BASE_URL+"user/me",{headers})
const data = await response.json()
return data
} catch (error){
console.log(error)
}
}
您只能在您的provider
中嵌入的組件中訪問context
中的變量和函數。 為了實現你想要的,請把你的App
組件放在AppProvider
中。 例如,您可以在index
文件中這樣做:
ReactDOM.render(
<React.StrictMode>
<AppProvider>
<App />
</AppProvider>
</React.StrictMode>,
document.getElementById("root")
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.