尝试将数据从传递<Route exact path="/" render={()=><Home addToCart={(book)=>{addToCart(book)}}/>}></Route>到<Route path="/cart" render={()=><Cart addToCart={cartItem}/>}></Route>
问题：
render={()=><Cart addToCart={cartItem}/>）接收到空值，但未收到我尝试发送的对象已放置“ console.log ...”以帮助调试，请查看代码
import React from 'react';
import classes from './Nav.module.css';
import { Route, NavLink, Switch } from 'react-router-dom';
import Home from '../Home/Home';
import Cart from '../Cart/Cart';
var cartItem = null;
let addToCart = (book)=>{
cartItem = book;
console.log('1. Displays the correct object', cartItem);
}
const nav = ()=>{
return (
<div>
<div className={classes.MenuContainer}>
<div className={classes.Menu}>
<div><NavLink to="/">Home</NavLink></div>
<div><NavLink to="/cart">Cart</NavLink></div>
</div>
</div>
<Switch>
<Route exact path="/" render={()=><Home addToCart={(book)=>{addToCart(book)}}/>}></Route>
<Route path="/cart" render={()=><Cart addToCart={cartItem}/>}></Route>
{console.log('2. Displays null', cartItem)}
</Switch>
</div>
);
}
export default nav;
如上所述，Redux将是一个很好的解决方案。
另一种选择是让父组件管理状态，然后将状态传递给它的两个孩子。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句