TypeError：无法读取 null 的属性“购物车”答案

【问题标题】：TypeError: Cannot read property 'carts' of nullTypeError：无法读取 null 的属性“购物车”
【发布时间】：2019-10-13 10:13:04
【问题描述】：

这是我第一次使用 Redux，所以请多多包涵，因为我并不真正了解整个事情是如何运作的。我正在尝试访问 CartPlantContainer.js 中的 Redux Store。当我console.log(this.props.user) 我得到：

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

但是当我 console.log(this.props.user.carts) 我得到错误：

TypeError: 无法读取 null 的属性“carts”

我不确定我做错了什么。我只想能够将this.props.user.carts 传递给我的下一个组件CartPlants，这样我就可以遍历购物车并渲染购物车中的所有植物。

如果您需要任何进一步的信息，请告诉我。我很乐意发送更多我的代码。新手在这里，所以请尝试使用尽可能多的外行术语。提前谢谢！

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)

还有我的用户减速器。

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;
    }
}

在后端，我的 API 在用户中嵌套了购物车。商店也描述了这一点。我不确定是否需要为 User 中的每个属性包含一个默认值，或者是否将整个对象设置为 null 就足够了。

当我console.log(this.props.user.carts[0]) 我现在收到：

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

但是当我console.log(this.props.user.carts[0].cart_plants) 我得到：

TypeError: 无法读取未定义的属性“cart_plants”

我完全不知道自己做错了什么。

更新：

我在initialState 中添加了一个空对象，并且能够在console.log(this.props.user.carts[this.props.user.carts.length-1].cart_plants) 中返回cart_plants 数组。

但是，尝试在单独的 generateCartPlants() 函数中映射它们会导致错误

TypeError: 无法读取未定义的属性“地图”


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

}

**有人有什么想法吗？我真的需要这方面的帮助才能推进我的项目，但我真的被困住了。如果需要，我可以提供更多代码，请告诉我！

【问题讨论】：

请出示您的减速机。一切都取决于您在商店中将所有这些值默认为什么。无论用户数据解析的速度有多快，都会有一段时间用户未定义并且可能发生此错误。您始终可以在父组件中添加条件渲染或在组件内添加条件逻辑，以避免渲染未定义的用户数据。
编辑我的帖子以显示更多代码。

标签： javascript reactjs redux react-redux redux-store

【解决方案1】：

您需要在 reducer 中为 user 状态设置初始值。在react 中，首先安装组件并检查状态。您的数据最终会被获取，但它需要有机会传播。给它一个初始的虚拟值会有所帮助。

您的减速器可能如下所示：

// 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;
}

【讨论】：