e.target.value 选项，选择无法读取未定义的属性“目标”

Question

我正在尝试处理下拉选择中实际选定项目的类别，它连接到 mongo 上的数据库，我必须采用选定类别项目的值来更改实际类别的状态（在西班牙语 CATEGORIA_ACTUAL），我正在尝试使用 onChange={this.handleChange} 处理类别，但它会抛出一个错误'select Cannot read property 'target' of undefined'

我不知道我怎么做错了，或者我怎么能做得好：C

这是组件。

import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as CotizacionesActions from '../actions/CotizacionesActions'
import * as ProductosActions from '../actions/ProductoActions'

/* Styles */
import '../assets/styles/Containers/Cotizaciones.scss'
class Cotizaciones extends Component {

    async componentDidMount() {
        await this.props.traerTodosLosProductos()
        await this.props.traerCategorias()
    }


    handleChange = (e) => {
        this.props.cambioCategoria(e.target.value)
    
    }
    optionsGenerator = () => this.props.productos.map((productos) => {
        let nombreProducto = productos.nombre;
        let precioProducto = productos.precio;
        return (
            <option
                value={nombreProducto}

            >
                {nombreProducto} - Precio: ${precioProducto}
            </option>
        )
    });

    traerCategorias = () => this.props.categorias.map(category => {
        let categori = category.categoria
        return (
            <option
                value={categori}
                onChange={this.handleChange} ----> Here is the problem
            >
                {categori}
            </option>
        )
    })


    cotizacionDinamica = () => {
        return (
            <div className="container__cotizacion">
                <div className="container__cotizacion--selectors">
                    <select name="" id="">{this.optionsGenerator()}</select>
                    <select name="" id="">{this.traerCategorias()}</select>
                </div>
                <div className="container__buttongroup">
                    <div className="btn">
                        <button className="btn__remove">
                            Remover
                            </button>
                    </div>
                </div>
            </div>
        )
    }

    render() {
        console.log(this.props.)
        return (
            <>
                <div className="container">
                    {this.cotizacionDinamica()}
                    <button className="container__addone">Agregar Item</button>
                </div>
            </>
        )
    }
}

const mapStateToProps = (reducers) => {
    return (
        reducers.ProductoReducer,
        reducers.CotizacionesReducer
    )
}
const mapDispatchToProps = {
    ...ProductosActions,
    ...CotizacionesActions
}


export default connect(mapStateToProps, mapDispatchToProps)(Cotizaciones)

Redux Action 和 reducer： 行动

import axios from 'axios'
import { CATEGORIA_ACTUAL, LISTAR_CATEGORIAS, LISTAR_PRODUCTOS } from '../types/CotizacionesTypes'
import { host_name, port_redux } from '../../../config'
import { ERROR, CARGANDO} from '../types/GlobalTypes'

const axiosConf = {
    baseURL: `http://${host_name}:${port_redux}`
}

export const traerCategorias = () => async (dispatch) => {
    dispatch({
        type: CARGANDO
    })
    try {
        const res = await axios.get(`/api/categorias/get/listar`, axiosConf)
        dispatch({
            type: LISTAR_CATEGORIAS,
            payload: res.data.data
        })
    } catch (error) {
        console.log("Error: " + error)
        dispatch({
            type: ERROR,
            payload: error.message
        })
    }

}

export const traerProductos = () => async (dispatch) => {
    dispatch({
        type: CARGANDO
    })
    try {
        const res = await axios.get(`/api/productos/get/listar`, axiosConf)
        dispatch({
            type: LISTAR_PRODUCTOS,
            payload: res.data
        })
    } catch (error) {
        console.log("Error: " + error)
        dispatch({
            type: ERROR,
            payload: error.message
        })
    }

}

export const cambioCategoria = (categoria) => async (dispatch) =>{ ----> Problematic Action!
    try {
        dispatch({
            type: CATEGORIA_ACTUAL,
            payload: categoria
        })
    } catch (error) {
        console.log("Error: " + error)
        dispatch({
            type: ERROR,
            payload: error.message
        })
    }
}

减速器

// TYPES
const {
    CARGANDO,
    ERROR
} = require('../types/GlobalTypes')
const {
    COTIZACION,
    LIMPIAR_COTIZACION,
    LISTAR_PRODUCTOS,
    LISTAR_CATEGORIAS,
    CATEGORIA_ACTUAL
} = require('../types/CotizacionesTypes')

const INITIAL_STATE = {
    productos:[],
    cotizacion: [],
    categorias: [],
    categoriaActual: '',
    error: '',
    cargando: false
}

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case LISTAR_PRODUCTOS:
            return{
                ...state,
                productos: action.payload
            }
        case COTIZACION:
            return {
                ...state,
                cotizacion: action.payload
            }
        case LISTAR_CATEGORIAS:
            return {
                ...state,
                categorias: action.payload
            }
        case CATEGORIA_ACTUAL: -----> These one Change the actual category
            return {
                ...state,
                categoriaActual: action.payload
            }
        case CARGANDO:
            return {
                ...state,
                cargando: true
            };
        case ERROR:
            return {
                ...state,
                error: action.payload
            }

        default:
            return state
    }
}

Answer 1

onChange={this.handleChange} 应该添加到 select 而不是 option