当我console.log(函数)一个页面到另一个页面时，它在另一个页面上给我未定义的值，但在真正的页面上，它给我真正的

Question

当我console.log(function)一个页面到另一个页面时，它在另一个页面上给我未定义的值，但在真正的页面上，它给我真正的值。如何在nextjs中解决

function MyApp({ Component, pageProps}) {
const [cart, setCart] = useState({}) 
const [subTotal, setSubTotal] = useState(0)
useEffect(() => {
console.log("hey i am a use effect from app .js")
try {
if(localStorage.getItem("cart")){
setCart(JSON.parse(localStorage.getItem("cart")))
}
} catch (error) {
console.error(error);
localStorage.clear()
}
}, [])

const saveCart = (myCart) => {
localStorage.setItem("cart",myCart)
let subt = 0;
let keys = Object.keys(cart)
for(let i = 0; i<keys.lenght; i++){
subt += myCart[keys[i]].price * myCart[keys[i]].qty;
}
setSubTotal(subt)
}
const addToCart = (itemCode, qty, price,name,size,variant) => {
let newCart = cart;
if(itemCode in cart){
newCart[itemCode].qty = cart[itemCode].qty + qty; 
} else {
newCart[itemCode] = {qty:1,price,name,size,variant}
}
setCart(newCart)
saveCart(newCart)
}
const clearCart = () => {
setCart({})
saveCart({})
}
const removeFromCart = (itemCode, qty, price,name,size,variant) => {
let newCart = cart;
if(itemCode in cart){
newCart[itemCode].qty = cart[itemCode].qty - qty; 
}
if(newCart[itemCode]["qty"]<=0){
delete newCart[itemCode]
}
setCart(newCart)
saveCart(newCart)
}
useEffect(()=>{
const mode = localStorage.getItem("mode");
if(mode){
document.documentElement.classList.add("dark");
}
},[])
return (
<Layout {...pageProps} cart={cart} saveCart={saveCart} addToCart={addToCart} clearCart={clearCart} removeFromCart={removeFromCart} subTotal={subTotal}>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp

这是主页

const  NavBarTop2 = ({cart,saveCart,addToCart,clearCart,removeFromCart,subTotal}) => {
console.log(cart,saveCart,addToCart,clearCart,removeFromCart,subTotal)
return (
<div className="nav_top2">
</div>
)
}
export default NavBarTop2;

这是另一个我想使用它们的页面，但它给了我未定义的变量如果有人知道请帮助我解决这个问题

Answer 1

对于这种情况，您应该创建一个react上下文提供程序。使用上下文提供程序还允许你访问包在该提供程序中的任何组件中的这些函数，而无需进行不必要的prop钻取。https://reactjs.org/docs/context.html

这是由于在NextJS中的页面组件的props的工作方式。你可以在这里阅读更多关于NextJS页面道具是如何工作的:https://nextjs.org/docs/basic-features/pages

// CartProvider.jsx
import { createContext,  useMemo, useState, useContext } from "react"
const CartContext = createContext(null)
export const useCart = () => useContext(CartContext)
const CartProvider = ({ children }) => {
const [cart, setCart] = useState({}) 
const [subTotal, setSubTotal] = useState(0)

const saveCart = (myCart) => {
localStorage.setItem("cart",myCart)
let subt = 0;
let keys = Object.keys(cart)
for(let i = 0; i<keys.lenght; i++){
subt += myCart[keys[i]].price * myCart[keys[i]].qty;
}
setSubTotal(subt)
}

const addToCart = (itemCode, qty, price,name,size,variant) => {
let newCart = cart;
if(itemCode in cart){
newCart[itemCode].qty = cart[itemCode].qty + qty; 
} else {
newCart[itemCode] = {qty:1,price,name,size,variant}
}
setCart(newCart)
saveCart(newCart)
}

const clearCart = () => {
setCart({})
saveCart({})
}

const removeFromCart = (itemCode, qty, price,name,size,variant) => {
let newCart = cart;
if(itemCode in cart){
newCart[itemCode].qty = cart[itemCode].qty - qty; 
}
if(newCart[itemCode]["qty"]<=0){
delete newCart[itemCode]
}
setCart(newCart)
saveCart(newCart)
}
const providerValue = useMemo(() => ({
cart,
saveCart,
addToCart,
clearCart,
removeFromCart,
subTotal,
}),[])
return (
<CartContext.Provider value={providerValue}>
{ children }
</CartContext.Provider>
)
}

export default CartProvider

// _app.jsx
import CartProvider from './CartProvider.jsx'
export default function MyApp({ Component, pageProps }) {
return (
<CartProvider>
<Component {...pageProps} />
</CartProvider>
)}

// NavBarTop2.jsx
import { useCart } from './CartProvider'
const NavBarTop2 = () => {
const {
cart,
saveCart,
addToCart,
clearCart,
removeFromCart,
subTotal,
} = useCart()
return ( //return here )
}

Answer 2

control from where你正在使用"NavBarTop2"， console.log中的undefined意味着你没有传递任何东西给NavBarTop2。

并不是说在main中定义的函数不是自动可用的。