TypeError:_this.props.addLead不是react中的函数

Question

我的prime react有问题，我试图将它连接到我的django api，我已经成功地完成了b4，它可以工作，但使用prime reace，相同的代码似乎不起作用。我不知道它是在运行react dom，还是这只是一个bug。所以在我的控制台上收到了这个警告信息。将有副作用的代码移动到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
});
'''

Answer 1

如上所述，运行命令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这应该能解决问题。