未捕获的类型错误：无法读取未定义的属性（读取“长度”）

Question

I am creating an eCommerce website and getting the error in the title.

This is my Navbar element, where I'm using 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;

This is my 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;

    }
        

       
}

and the index.js

import handleCart from "./handleCart";
import { combineReducers } from "redux";

const rootReducers = combineReducers({
    handleCart,
})

export default rootReducers;

I'm completely new to React, so let me know what else you need me to show. I needed the Cart() in the navbar to show the number of items added. But it just returns this error. It works whenever I remove "state.length".

When I added state?.length , some of my app started to render, but the cart doesn't work still, and every time I click on add to cart, this error shows up:

Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.

Not sure why the formatting error, I hope you guys get it!

Answer 1

It means when you call {{state.length}},it didn't exsit yet. To fix this, you can set code to this:

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

Means: When state.length is defined, then call Cart({state.length}) or do nothing.