TypeError：无法读取未定义的属性“有效负载”

Question

我正在尝试从名为 initialState 的对象中获取数据并对其进行 console.log

basketReducer.js

import { ADD_PRODUCT_BASKET, GET_NUMBERS_BASKET } from '../actions/types'


const initialState = {
    basketNumbers: 0,
    cartCost: 0,
    products: {

        blackOne: {
            name: "Black One",
            price: 120,
            numbers: 0,
            inCart: false
          },

          blackThree: {
            name: "Black Three",
            price: 120,
            numbers: 0,
            inCart: false
          },

          blackFour: {
            name: "Black Four",
            price: 120,
            numbers: 0,
            inCart: false
          }
    }
} 

export default (state = initialState, action) => {
    switch(action.type) {
        case ADD_PRODUCT_BASKET:
          let addQuantity = { ...state.products[action.payload] }
          console.log(addQuantity)

            return {
              ...state,
              basketNumbers: state.basketNumbers + 1
            }
        case GET_NUMBERS_BASKET:
            return {
                ...state
            }
        default:
            return state
    }
} 

addAction.js

import { ADD_PRODUCT_BASKET} from './types'


export const addBasket = (productName) => {
    return (dispatch) => {
        console.log('Adding to Basket')
        console.log('Product:', productName)
        dispatch({
            type: ADD_PRODUCT_BASKET,
            payload: productName
        })
    }
}

types.js

export const ADD_PRODUCT_BASKET = 'ADD_PRODUCT_BASKET'
export const GET_NUMBERS_BASKET = 'GET_NUMBERS_BASKET'

FilterPanel.js

注意：我不关注来自该州的数据。目前我只使用 render 方法中的 onClick 方法来获取 this.props.addBasket(item.name)

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addBasket } from '../actions/addAction'
import axios from 'axios'
import './FilterPanel.css'


export class FilterPanel extends Component {
    constructor(props) {
        super(props)

        this.state = {
            color: "",
            shoes: []
        }

        this.handleColorChange = this.handleColorChange.bind(this)
    }

    componentDidMount() {
        axios.get('http://localhost:4000/shoes')
            .then(res => {
                const shoeData = res.data
                this.setState({
                    shoes: shoeData
                })
            })
            .catch((error) => {
                console.log(error)
            })
    }

    handleColorChange(e) {
        const color = e.target.value
        console.log(color)
        this.setState({
            color: color
        })
    }

    render() {
        console.log(this.props)
        const { shoes } = this.state
        const colors = ["Black", "Blue", "Brown", "Gray", "Green", "Red", "White"]
        const shoesToShow = shoes.map(item => {
            if (item.mainColor === this.state.color) {
                return <div key={item._id} className="each-shoe-div col-sm-6 col-md-6 col-lg-3">
                        <div>
                            <img className="img-fluid image" src={item.image} alt="pic"/>
                            <p>{item.name}</p>
                            <p>${item.price}</p>
                            <p onClick={ () => this.props.addBasket(item.name)} className="basket-p" >Add to cart</p> 
                        </div>
                       </div>
            } else {
                return null
            }
        })

        console.log(this.props)

        return (
            <React.Fragment>
                <div className="form-div">
                    <form>
                        {colors.map((color, index) => (
                            <label key={index}>
                                {color}
                                <input
                                    value={color}
                                    checked={this.state.color === color}
                                    onChange={this.handleColorChange}
                                    type="radio"
                                />
                            </label>
                        ))}
                    </form>
                </div>
                <div className="filtered-shoes">{shoesToShow}</div>

            </React.Fragment>
        )
    }
}

export default connect(null, { addBasket })(FilterPanel)

我希望单击按钮可以转到添加了数据信息的购物车页面。 这是我想用于添加到购物车按钮的真实数据：

shoe.model.js（鞋模式）：

const mongoose = require('mongoose')
const Schema = mongoose.Schema


let Shoe = new Schema({
    image: {
        type: String
    },
    cartImage: {
        type: String
    },
    name: {
        type: String
    },
    color: {
        type: String
    },
    price: {
        type: Number
    },
    mainColor: {
        type: String
    },
    midImage: {
        type: String
    },
    heroFeatured: {
        type: Boolean
    },
    message: {
        type: String
    }
})


module.exports = mongoose.model('Shoe', Shoe)

shoe.route.js（鞋子路线）：

const express = require('express')
const shoeRouter = express.Router()

const Shoe = require('./shoe.model')


shoeRouter.route('/shoes').get((req, res) => {
    Shoe.find((err, shoes) => {
        if(err) {
            console.log(err)
        } else {
            res.json(shoes)
        }
    })
})

shoeRouter.route('/shoes/:id').get((req, res) => {
    let id = req.params.id
    Shoe.findById(id, (err, shoe) => {
        res.json(shoe)
    })
})


module.exports = shoeRouter

server.js（数据库连接/路由）

const express = require('express')
const app = express()
const cors = require('cors')
const mongoose = require('mongoose')
const shoeRouter = require('./shoe.route')
const userRouter = require('./user.route')
const emailRouter = require('./email.route')
//const routes = express.Router()


const PORT = 4000

app.use(cors())
app.use(express.urlencoded({ extended: false }))
app.use(express.json())


mongoose.connect('mongodb connection...', { useUnifiedTopology: true, useNewUrlParser: true })
const connection = mongoose.connection

connection.once('open', () => {
    console.log("MongoDB database connection established successfully")
})


app.use('/', shoeRouter)
app.use('/', userRouter)
app.use('/', emailRouter)


app.listen(PORT, () => {
    console.log('Server is running on port ' + PORT);
})

我不知道如何实现购物车，所以我按照教程进行操作。

来自(basketReducer.js) 的initialState 对象是我根据我的真实数据建模的假数据。 我尝试从教程中添加假数据模型（只是添加了真实数据的副本）

如何使用来自（filterPanel.js 状态）的原始数据来实现这一点？谢谢！

Answer 1

我认为您的 FilterPanel 组件中缺少此 mapDispatchToProps。

请尝试添加这个 -:

// old code from component
                <div className="filtered-shoes">{shoesToShow}</div>
            </React.Fragment>
        )
    }
}
function mapDispatchToProps(dispatch){
    return {
        addBasket: (param) => dispatch(addBasket(param))
    }
}
export default connect(null, mapDispatchToProps)(FilterPanel)