2

这是我第一次使用 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 的属性“购物车”

我不确定我做错了什么。我只想能够传递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

}

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

4

1 回答 1

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;
}
于 2019-10-12T03:44:25.497 回答