Ошибка типа: _this.props.addLead не является функцией в реакции - PullRequest
Новая
       16

Ошибка типа: _this.props.addLead не является функцией в реакции

0 голосов
/ 27 февраля 2020

У меня проблемы с Prime-Reaction, я пытался подключить его к моему django API, что я успешно выполнил b4, и он работает, но с Prime-реагировать тот же код, похоже, не работает. я не знаю, работает ли он или нет, это просто ошибка. поэтому получил это предупреждение в моей консоли. Переместите код с побочными эффектами в componentDidMount и установите начальное состояние в конструкторе. Переименуйте componentWillMount в UNSAFE_componentWillMount, чтобы отключить это предупреждение в нестрогом режиме. В React 17.x будет работать только имя UNSAFE_. Чтобы переименовать все устаревшие жизненные циклы в их новые имена, вы можете запустить npx react-codemod rename-unsafe-lifecycles в исходной папке вашего проекта. 

'''
LeadsForm

import React, { Component } from 'react'
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { addLead } from '../actions/leads';
import {InputTextarea} from 'primereact/inputtextarea';
import {InputText} from 'primereact/inputtext';
import { Button } from 'primereact/button';

export class LeadsForm extends Component {
    state = {
        name: '',
        email: '',
        message: ''
    };
    static propTypes = {
      addLead: PropTypes.func.isRequired
    };
  onChange = e => this.setState({ [e.target.name]: e.target.value});

  onSubmit = e => {
      e.preventDefault();
      const { name, email, message } = this.state;
      const lead = { name, email, message };
      this.props.addLead(lead);
      this.setState({
        name: "",
        email: "",
        message: ""
      });
    };
    render() {
        const { name, email, message } = this.state;
        return (
            <div className="card card-w-title">
            <div className="p-grid ">
               <h2>Add Lead</h2>
               <form onSubmit={this.onSubmit}>
                 <div className="p-col-12">
                    <span className="p-float-label">
                      <InputText id="in"
                      name="name" 
                      value={name} 
                      onChange={this.onChange} size={50} />
                      <label htmlFor="in">Name</label>
                    </span>
                    </div>
                    <div className="p-col-12">
                    <span className="p-float-label">
                      <InputText id="in"
                      name="email" 
                      value={email} 
                      onChange={this.onChange} size={50}/>
                      <label htmlFor="in">Email</label>
                    </span>
                    </div>
                    <div className="p-col-12">
                    <span className="p-float-label">
                    <InputTextarea id="in" size={50} rows={5} cols={30}
                      name="message" 
                      value={message} 
                      onChange={this.onChange} />
                      <label htmlFor="in">Message</label>
                    </span>
                    </div>


            <Button type = "submit" value="Submit" label="Save" style={{marginBottom:'10px'}} className="p-button-raised" />
            {/* <button type="submit" className="btn btn-primary">
              Submit
            </button> */}

               </form>
           </div>
           </div>
        )
    }
}

export default connect(null, { addLead })(LeadsForm);

// здесь находится файл действий / потенциальных клиентов 

import axios from 'axios';

import { GET_LEADS, ADD_LEAD } from './types'


export const getLeads = () => dispatch => {
    axios
    .get("http://127.0.0.1:8000/api/leads/")
    .then(res => {
        dispatch({
            type: GET_LEADS,
            payload: res.data
        });
    }).catch(err => console.log(err));
};

// ADD LEADS
export const addLead = lead => dispatch => {
    axios
    .post("http://127.0.0.1:8000/api/leads/", lead)
    .then(res => {
        dispatch({
            type: ADD_LEAD,
            payload: res.data
        });
    }).catch(err => console.log(err));
}

//here is the action/types file

export const GET_LEADS = "GET_LEADS";
export const ADD_LEAD = "ADD_LEAD";

//reducers/leads

import { GET_LEADS, ADD_LEAD } from '../actions/types.js';

const initialState = {
    leads: []
}

export default function (state = initialState, action){
switch(action.type){
    case GET_LEADS:
      return {
        ...state,
        leads: action.payload
      };
    case ADD_LEAD:
      return {
        ...state,
        leads: [...state.leads, action.payload]
      }
    default:
        return state;
    }
}

//reducers/index

import { combineReducers } from 'redux';
import leads from './leads';
export default combineReducers({
    leads
});
'''

1 Ответ

0 голосов
/ 02 марта 2020

как сказано, запустите команду npx react-codemod rename-unsafe-lifecycles, и если вы получите сообщение об ошибке, подобное этому: 

npm ERR cb() never called

, запустите это: 

npm config set registry https://registry.npmjs.org/

и затем снова запустите это: npx react-codemod rename-unsafe-lifecycles Это должно решить проблему.

...