TypeError: Cannot read property 'carts' of null

user_12203835 0
Viewed 923

This is my first time with Redux so please bear with me as I am not really understanding how this whole thing works. I am trying to gain access to my Redux Store in CartPlantContainer.js. When I console.log(this.props.user) I get:

{id: 5, name: "b", email: "b", carts: Array(1)}

But when I console.log(this.props.user.carts) I get the error:

TypeError: Cannot read property 'carts' of null

I'm not really sure what I'm doing wrong. I just want to be able to pass this.props.user.carts down to my next component CartPlants so that I can iterate over the cart and render all of the plants in the cart.

If you need any further information, please let me know. I'd be happy to send some more of my code over. Newbie here, so please try to use as many layman's terms as possible. Thank you in advance!

import React, { Component } from 'react'
import {connect} from 'react-redux'
import CartPlants from '../components/CartPlants'

class CartPlantContainer extends Component {

    render() {

        // This prints fine:
        console.log(this.props.user); // Displays "{id: 5, name: "b", email: "b", carts: Array(1)}"

        // This fails:
        console.log(this.props.user.carts); // Throws TypeError: Cannot read property 'carts' of null

        return (
            <div>
              <CartPlants />
            </div>
        )
    }
}

const mapStateToProps = state => ({
    user: state.user.user
})


export default connect(mapStateToProps)(CartPlantContainer)

And my Reducer for the User.

let initialState = {user: {
    id: 0,
    name: "",
    email: "",
    carts: [{}]
    }
}
export function userReducer(state = initialState, action) {
    switch(action.type) {
        case LOGIN_USER: 
            return {
                ...state, 
                user: action.user 
            };
        case ADD_CART_PLANT: 
            return {
                ...state,
                user: {...state.user, carts: [...state.user.carts, action.cart_plant]}
            }
        default:
            return state;
    }
}

In the backend, my API has carts nested within User. The store depicts this as well. I wasn't sure if I needed to include a default value for each attribute in User or if setting the whole object to null would suffice.

When I console.log(this.props.user.carts[0]) I now receive:

{id: 5, checkout: false, user_id: 5, total: 2200, cart_plants: Array(20)}

But when I console.log(this.props.user.carts[0].cart_plants) I get:

TypeError: Cannot read property 'cart_plants' of undefined

I'm totally stumped on what I'm doing wrong.

UPDATE:

I added an empty Object to my initialState and was able to console.log(this.props.user.carts[this.props.user.carts.length-1].cart_plants) to return the array of cart_plants.

However, attempting to map over them in a separate generateCartPlants() function results in the error

TypeError: Cannot read property 'map' of undefined


generateCartPlants = () => {

    const currentCart = this.props.user.carts[this.props.user.carts.length - 1]

    const cartPlantData = currentCart.cart_plants.map(cart_plant => { 

    return <div className="cart-plant-card" key={cart_plant.id}>

    <CartPlant id={cart_plant.id} image={cart_plant.plant.image} size={cart_plant.plant.size} price={cart_plant.plant.price} name={cart_plant.plant.name} species={cart_plant.plant.species} exp_level={cart_plant.plant.exp_level} light_required={cart_plant.plant.light_required}     pet_friendly={cart_plant.plant.pet_friendly}/>

    </div>

   })
      return cartPlantData

}

**Any ideas anyone? I really need help on this to move forward with my project and I'm really stuck. I can provide more code if needed, please let me know!

redux-store react-redux redux reactjs javascript
1 Answers

You need to set initial values for your user state in your reducer. In react, components are mounted and states are checked first. Your data is eventually fetched, but it needs to have a chance to propagate. Giving it an initial dummy value helps with that.

Your reducer could look like this:

// default values need to be set
const initialState = {
    user: {
        id: 0,
        name: "",
        email: "",
        carts: []
    }
}

export default function userReducer(state = initialState, action) {
    if(action.type === "UPDATE_USER") {
        return { ... state, action.payload };
    }

    // always return the state;
    return state;
}
user_16891440
Related