gpt4 book ai didi

reactjs - 将数据从一个路由器(组件)传递到另一个路由器(组件)

转载 作者:行者123 更新时间:2023-12-03 14:11:17 26 4
gpt4 key购买 nike

尝试从 <Route exact path="/" render={()=><Home addToCart={(book)=>{addToCart(book)}}/>}></Route> 传递数据至<Route path="/cart" render={()=><Cart addToCart={cartItem}/>}></Route>

问题:

  1. 购物车 ( render={()=><Cart addToCart={cartItem}/> ) 收到 null,但没有收到我尝试发送的对象

已放置“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 将是一个很好的解决方案。

另一种选择是让父组件管理状态,然后将状态传递给它的两个子组件。

关于reactjs - 将数据从一个路由器(组件)传递到另一个路由器(组件),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58382587/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com