проблема для вызова функции действия - это сокращение, у меня есть сообщение: this.props.nameofprops.action () не является функцией - PullRequest
Новая
       23

проблема для вызова функции действия - это сокращение, у меня есть сообщение: this.props.nameofprops.action () не является функцией

1 голос
/ 12 июля 2020

Я пишу код response-redux. Я определил действие для вызова в компоненте, оно называется addCart. 

import axios from "axios"
import {GET_PLATS} from "./actionType"
 
 

export const getplats = () => dispatch => {
    // 2-1 axions get the same path of back in app.use
    axios.get("/plat-list").then(res => {
        dispatch({
            //2-2 same name in action type (after this go to make reducers)
            type:GET_PLATS,
            payload:res.data
        })
    }) 
}

export const addCart =( ) =>{
    return (dispatch) => {
         
        console.log("added To cart");
        dispatch({
            type:GET_PLATS,
            
        })
    }
}

, затем я написал этот редуктор: 

import { GET_PLATS } from "../action/actionType"

//first create first main state
const initialState={
    plats:[],
    cmdElements:[]
}

export default function(state=initialState,action){
    switch(action.type){
        case GET_PLATS:
             return{
                 ...state,
                 plats:action.payload,
                 cmdElements:state.cmdElements
              
             }
             default : 
              return  state

        }
    
}

Затем я вызвал это действие в компоненте **

import React, { Component } from 'react'
import { connect } from 'react-redux'
import {getplats,addCart } from '../../action/action'
import PropTypes from 'prop-types'
const { Meta } = Card
 

 class PlatListeU extends Component {
 
    componentDidMount(){
        this.props.getplats()        
    }
  render() {
        return (
    <div>
     <Button type="primary" onClick={ () =>{ 
                      this.props.platListe.addCart()
                  } } >addTocart</Button>

    </div>
)}

PlatListeU.propTypes = {
    addCart:PropTypes.func.isRequired,
    PlatListe:PropTypes.object.isRequired

}


const mapStateToProps =(state) =>{
    return{
        platListe:state.plats ,
         cmdElements:state.cmdElements
    
    }
}


export default connect(mapStateToProps,{ getplats,addCart}) (PlatListeU)

Но когда я нажимаю кнопку, у меня появляется следующее сообщение об ошибке:

TypeError: this.props. platListe.addCart - это не функция

Все должно быть нормально. Я пробовал много способов, но результат тот же. Кто-нибудь может мне помочь?

Ответы [ 3 ]

0 голосов
/ 12 июля 2020

Я думаю, вы просто хотите this.props.addCart(). Ключ platListe существует в вашем объекте состояния, к нему не прикреплены никакие методы. Вы импортируете автономные методы в верхнюю часть вашего компонента.

0 голосов
/ 12 июля 2020

Это просто this.props.addCart(). Вы импортируете методы в компонент, а не в platListe. Таким образом, ошибка.

Для другой ошибки:

похоже, что ваши редукторы отображаются правильно. поэтому state.moviesReducer всегда определяется.

, если ваш начальный список элементов даже не загружается правильно, означает, что ваш объект items вызывает ошибку.

, если ваш начальный список загружается правильно, и ошибка возникает только после того, как вы отправили действие, это означает, что ваш update () изменяет форму вашего состояния.

Я не знаю, откуда вы получаете эту функцию обновления. но я полагаю, вам следует просто вернуть {items: update (..)}

Вот как я бы go отладил ваш код.

0 голосов
/ 12 июля 2020

Думаю, это просто this.props.addCart()

...