未捕获的类型错误：无法读取未定义的属性(读取"长度")

Question

我正在创建一个电子商务网站，并在标题中获得错误。

这是我的导航栏元素，我使用state.length:

import React from "react";
import { useSelector } from "react-redux";
import { NavLink } from "react-router-dom";
const Navbar = () => {
const state = useSelector((state) => state.handleCart);
return (
<div>
<nav className="navbar navbar-expand-lg bg-white py-3 shadow-sm">
<div className="container">
<NavLink className="navbar-brand fw-bold fs-5" to="/">
Some Generic Shop
</NavLink>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mx-auto mb-2 mb-lg-0">
<li className="nav-item">
<NavLink className="nav-link active" aria-current="page" to={`/`}>
Home
</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to={`/products`}>
Products
</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to={`/about`}>
About
</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to={`/contact`}>
Contact us!
</NavLink>
</li>
</ul>
<div className="buttons my-3 mx-1">
<NavLink to="/login" className="btn btn-outline-dark">
<i className="fa fa-sign-in me-1"></i> Login
</NavLink>
</div>
<div className="buttons my-3 mx-1">
<NavLink to="/register" className="btn btn-outline-dark">
<i className="fa fa-user-plus me-1"></i> Sign up
</NavLink>
</div>
<div className="buttons my-3 mx-1">
<NavLink to="/cart" className="btn btn-outline-dark">
<i className="fa fa-shopping-cart me-1"></i> Cart({state.length})
</NavLink>
</div>
</div>
</div>
</nav>
</div>
);
};
export default Navbar;

这是我的handleCart.js

const cart=[];
const handleCart = (state = cart, action) => {
const product = action.payload;
switch(action.type) {
case "ADDITEM":
//check if product exists
const exist_1 = state.find((x) => x.id === product.id);
if(exist_1){
//increase quantity
return state.map((x)=>
x.id === product.id ? {...x, qty: x.qty + 1}: x
);
} else {
const product = action.payload;
return[
...state,
{
...product,
qty: 1,
}
]
}
break;
case "DELETEITEM":
const exist_2 = state.find((x) => x.id === product.id);
if(exist_2.qty === 1){
return state.filter((x)=> x.id !==exist_2.id);
}else{
return state.map((x)=>
x.id === product.id ? {...x, qty: x.qty-1} : x
);
}
break;
default: 
return state;
break;
}


}

和index.js

import handleCart from "./handleCart";
import { combineReducers } from "redux";
const rootReducers = combineReducers({
handleCart,
})
export default rootReducers;

我是React的新手，所以让我知道你还需要我展示什么。我需要导航栏中的Cart()来显示添加的项目数量。但它只是返回这个错误。当我删除"state.length"时，它就会工作。

当我添加state?.length时，我的一些应用程序开始渲染，但购物车仍然不起作用，每次我点击添加到购物车时，这个错误显示:

Store没有有效的reducer。确保传递给combineReducers的参数是一个值为reducer的对象。

不知道为什么格式错误，我希望你们得到它!

Answer 1

这意味着当您调用{{state时。长度}}，它还不存在。要解决这个问题，可以这样设置代码:

<NavLink to="/cart" className="btn btn-outline-dark">
<i className="fa fa-shopping-cart me-1"></i>  
{state.length?Cart({state.length}):""}
</NavLink>

的意思是:当状态。如果定义了length，则调用Cart({state.length})或什么都不做。