0

我遇到了 prime-react 的问题，我试图将它连接到我已经成功完成 b4 的 django api 并且它可以工作，但是使用 prime-react 相同的代码似乎不起作用。我不知道它是否正在运行 react dom 或者这只是一个错误。所以在我的控制台中收到了这个警告信息。将带有副作用的代码移至 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
});
'''
4

1 回答 1

0

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

于 2020-03-02T10:13:42.840 回答