Question

这是我第一次与Redux合作，所以请多多包涵，因为我不太了解这整个过程是如何工作的。我试图在CartPlantContainer.js中访问我的Redux商店。当我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：无法读取未定义的属性“ map”


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

}

**有人有创意吗？我真的需要帮助以推进我的项目，而且我真的很困。如果需要，我可以提供更多代码，请告诉我！

Answer 1

您需要在化简器中为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;
}

TypeError：无法读取null的属性'carts'

1 个答案: