如何解决在反应中添加一个计数器
我正在尝试制作购物车,我想在标题中添加一个计数器,但我收到一条错误消息,提示“无法读取未定义的属性‘长度’”。
这是标题的代码:
import React,{useState} from 'react';
function Toolbar(props){
const {cart} = props;
return(
<header>
<button>
<span>
Go To Cart:
{cart.length}</span>
</button>
</header>
)
}
export default Toolbar;
这是产品页面的代码。它确实在控制台日志中计数,但不在屏幕上。
import React,{useState} from 'react'
function Products(props) {
const [cart,setCart]=useState([]);
const addtoCart=(props)=>{
console.log('we are in addToCart');
setCart([...cart,props]);
};
return(
<div >
<h1>Products</h1>
<div className="product" key={props.id}>
<h3>{props.name}</h3>
<h4>{props.cost}</h4>
<img src ={props.image} alt="/"/>
<button onClick={()=>addtoCart(props)}>Add to Cart</button>
</div>
</div>
);
}
export default Products;
解决方法
您似乎没有将任何道具传递给 ToolBar
组件。
更新:根据您分享的评论和代码框链接,这确实是您的问题。没有传递给 ToolBar
组件的道具。
我已经修改了 CodeSandBox 上的代码:
https://codesandbox.io/s/serve-humanity-8hm17
我想指出一个事实,如果您将 props 传递给 ToolBar
组件,但该组件在数据可用之前呈现,在这种情况下,您也会收到此错误。
在这种情况下,您可以添加支票:
<span>
Go To Cart:
{cart.length && cart.length}
</span>
注意:交叉验证您是否确实收到了任何道具。声明后立即在您的 console.log(props.cart)
组件中执行 Toolbar
。
function Toolbar(props){
console.log(props);
const {cart} = props;
return(...)
}
通过这种方式,您将更好地了解数据发生了什么,并且可以更好地调试您的应用 :)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。