Forms react js中通过API获取响应后的表单重置问题

我通过redux API调用提交表单并获得响应，但在成功响应后，我尝试重置表单，但给出问题-

setState（…）：无法在现有状态转换期间更新（例如在

render

或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数；构造函数的副作用是一种反模式，但可以移动到“componentWillMount”。

这是我的档案-

=========================

import React from 'react'; 
import DefaultLayout from '../Layout/DefaultLayout';
//import $ from 'jquery';
import { connect } from 'react-redux'; 
import { contactRequest } from '../actions/signupActions';
import { bindActionCreators } from 'redux';
import  validator from 'validator';



class Contactus extends React.Component {
    constructor(props){
        super(props);
        document.title = "Contact Us";

        this.errorMapping = {"100": "Your message has been submitted.",
        "102": "Name cannot be empty.",
        "104": "Email cannot be empty.",
        "103": "Hotel cannot be empty.",
        "105": "Incorrect email format.",
        "106": "Phone cannot be empty."}

        this.state = {name: '',email:'',message :''};

        this.handleInputChange = this.handleInputChange.bind(this); 
        this.handleSubmit = this.handleSubmit.bind(this); 

        this.baseState = this.state 
    }


    handleInputChange(event) {
        this.setState({ [event.target.name]: event.target.value});
    }

    handleSubmit(event) {
        event.preventDefault();
        this.props.contactRequest(this.state);
    }


    render(){
        const style_1 = {height: '240px'};
        const style_2 = {marginRight: '15px'};
        const style_3 = {width: 'auto'};

        return(
            <DefaultLayout>
                <section id="content">
                    <div className="content-wrap">
                        <div className="container clearfix">

                            <div className="col-md-6 bottommargin">
                                <section id="google-map" className="gmap" style={style_1} ></section>
                            </div>

                            <div className="col-md-6">

                                <a href="#" data-toggle="modal" data-target="#contactFormModal" className="button button-3d nomargin btn-block button-xlarge hidden-xs center">Click here to Send an Email</a>
                                <a href="#" data-toggle="modal" data-target="#contactFormModal" className="button button-3d nomargin btn-block visible-xs center">Send an Email</a>

                                <div className="modal fade" id="contactFormModal" tabIndex="-1" role="dialog" aria-labelledby="contactFormModalLabel" aria-hidden="true">
                                    <div className="modal-dialog">
                                        <div className="modal-content">

                                            <div className="modal-body">

                                                <div className="contact-widget">
                                                        <div className="contact-form-result">
                                                            {this.props.resultMessage && this.props.resultMessage.status.map((msg, idx) => { 
                                                                     if(msg === 100) { 
                                                                        this.setState({name : "",email : ""});
                                                                        return <span key={idx} id="succ_msg">{this.errorMapping[msg]}</span>
                                                                     } else {
                                                                        return <span key={idx} id="err_msg">{this.errorMapping[msg]}</span>
                                                                    }
                                                                })
                                                            }
                                                        </div>
                                                    <form className="nobottommargin" id="r_contactform" name="r_contactform" method="post" onSubmit={this.handleSubmit} ref={(el) => this.myFormRef = el} >

                                                        <div className="form-process"></div>

                                                        <div className="col_half">
                                                            <label htmlFor="template-contactform-name">Name <small>*</small></label>
                                                            <input type="text" id="template-contactform-name" name="name" value={this.state.name} className="sm-form-control required" onChange={this.handleInputChange} />
                                                        </div>

                                                        <div className="col_half col_last">
                                                            <label htmlFor="template-contactform-email">Email <small>*</small></label>
                                                            <input type="email" id="template-contactform-email" name="email" value={this.state.email} className="required email sm-form-control" onChange={this.handleInputChange} />
                                                        </div>

                                                        <div className="clear"></div>


                                                        <div className="clear"></div>

                                                        <div className="col_half">
                                                            <label htmlFor="template-contactform-message">Message <small>*</small></label>
                                                            <textarea className="required sm-form-control" id="template-contactform-message" name="message"  value={this.state.message} rows="6" cols="30" onChange={this.handleInputChange}></textarea>
                                                            <span className={this.state.messageError ? 'help-block error': '' }>{ this.state.messageError ? this.state.messageError: '' }</span>
                                                        </div>

                                                        <div className="col_full">
                                                            <button className="button button-3d nomargin" type="submit" id="contactform-submit" name="contactform-submit">Send Message</button>
                                                        </div>

                                                    </form>

                                                </div>


                                            </div>
                                            <div className="modal-footer">
                                                <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </section>

            </DefaultLayout>
        );  
    }
}


function mapStateToProps(state){
    console.log("View data :"+JSON.stringify(state.Contactdata));
    return { 
        resultMessage: state.Contactdata
    }
}
function mapDispatchToProps(dispatch) {
      return bindActionCreators({contactRequest: contactRequest}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps) (Contactus);

从“React”导入React；
从“../Layout/DefaultLayout”导入DefaultLayout；
//从“jquery”导入美元；
从'react redux'导入{connect}；
从“../actions/signupActions”导入{contactRequest}；
从“redux”导入{bindActionCreators}；
从“验证器”导入验证器；
类Contactus扩展了React.Component{
建造师（道具）{
超级（道具）；
document.title=“联系我们”；
this.errorMapping={“100”：“您的邮件已提交。”，
“102”：“名称不能为空。”，
“104”：“电子邮件不能为空。”，
“103”：“酒店不能是空的。”，
“105”：“电子邮件格式不正确。”，
“106”：“电话不能为空。”}
this.state={name:''，电子邮件：''，消息：'}；
this.handleInputChange=this.handleInputChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.baseState=this.state
}
handleInputChange（事件）{
this.setState（{[event.target.name]：event.target.value}）；
}
handleSubmit（事件）{
event.preventDefault（）；
this.props.contactRequest（this.state）；
}
render（）{
const style_1={height:'240px'}；
const style_2={marginRight:'15px'}；
const style_3={width:'auto'}；
返回(
{this.props.resultMessage&&this.props.resultMessage.status.map（（msg，idx）=>{
如果（msg==100）{
this.setState（{name:，email:}）；
返回{this.errorMapping[msg]}
}否则{
返回{this.errorMapping[msg]}
}
})
}
this.myFormRef=el}>
名字*
电子邮件*
信息*
{this.state.messageError？this.state.messageError:'}
发送消息
接近
);  
}
}
函数MapStateTops（状态）{
log（“查看数据：+JSON.stringify（state.Contactdata））；
返回{
结果消息：state.Contactdata
}
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{contactRequest:contactRequest}，dispatch）
}
导出默认连接（mapStateToProps、mapDispatchToProps）（Contactus）；

在

mapstatetops

函数中获取响应，并尝试更新已应用条件的状态

if（msg==100）

请让我知道我哪里做错了

---

谢谢

这就是原因，您在

渲染

方法中执行

设置状态

：

{this.props.resultMessage && this.props.resultMessage.status.map((msg, idx) => { 
      if(msg === 100) { 
         this.setState({name : "",email : ""});
         .....

当msg==100为真时，您正在执行

setState

，它将再次触发

重新呈现

，再次触发

setState

无限循环

删除

设置状态
componentWillReceiveProps(newProps) {
    newProps.resultMessage.status.forEach((msg, idx) => { 
         if(msg === 100) { 
              this.setState({
                  name : "",
                  email : ""
              });
         }
    }           
}

class Contactus extends React.Component {
    constructor(props){
        super(props);
        document.title = "Contact Us";

        this.errorMapping = {"100": "Your message has been submitted.",
        "102": "Name cannot be empty.",
        "104": "Email cannot be empty.",
        "103": "Hotel cannot be empty.",
        "105": "Incorrect email format.",
        "106": "Phone cannot be empty."}

        this.state = {name: '',email:'',message :''};

        this.handleInputChange = this.handleInputChange.bind(this); 
        this.handleSubmit = this.handleSubmit.bind(this); 

        this.baseState = this.state 
    }
    componentWillReceiveProps(nextProps) {
           nextProps.resultMessage.status.forEach((msg, idx) => { 
                if(msg === 100) { 
                    this.setState({name : "",email : ""});
                 }
          }           
    }

    handleInputChange(event) {
        this.setState({ [event.target.name]: event.target.value});
    }

    handleSubmit(event) {
        event.preventDefault();
        this.props.contactRequest(this.state);
    }


    render(){
        const style_1 = {height: '240px'};
        const style_2 = {marginRight: '15px'};
        const style_3 = {width: 'auto'};

        return(
            <DefaultLayout>
                <section id="content">
                    <div className="content-wrap">
                        <div className="container clearfix">

                            <div className="col-md-6 bottommargin">
                                <section id="google-map" className="gmap" style={style_1} ></section>
                            </div>

                            <div className="col-md-6">

                                <a href="#" data-toggle="modal" data-target="#contactFormModal" className="button button-3d nomargin btn-block button-xlarge hidden-xs center">Click here to Send an Email</a>
                                <a href="#" data-toggle="modal" data-target="#contactFormModal" className="button button-3d nomargin btn-block visible-xs center">Send an Email</a>

                                <div className="modal fade" id="contactFormModal" tabIndex="-1" role="dialog" aria-labelledby="contactFormModalLabel" aria-hidden="true">
                                    <div className="modal-dialog">
                                        <div className="modal-content">

                                            <div className="modal-body">

                                                <div className="contact-widget">
                                                        <div className="contact-form-result">
                                                            {this.props.resultMessage && this.props.resultMessage.status.map((msg, idx) => { 
                                                                     if(msg === 100) { 

                                                                        return <span key={idx} id="succ_msg">{this.errorMapping[msg]}</span>
                                                                     } else {
                                                                        return <span key={idx} id="err_msg">{this.errorMapping[msg]}</span>
                                                                    }
                                                                })
                                                            }
                                                        </div>
                                                    <form className="nobottommargin" id="r_contactform" name="r_contactform" method="post" onSubmit={this.handleSubmit} ref={(el) => this.myFormRef = el} >

                                                        <div className="form-process"></div>

                                                        <div className="col_half">
                                                            <label htmlFor="template-contactform-name">Name <small>*</small></label>
                                                            <input type="text" id="template-contactform-name" name="name" value={this.state.name} className="sm-form-control required" onChange={this.handleInputChange} />
                                                        </div>

                                                        <div className="col_half col_last">
                                                            <label htmlFor="template-contactform-email">Email <small>*</small></label>
                                                            <input type="email" id="template-contactform-email" name="email" value={this.state.email} className="required email sm-form-control" onChange={this.handleInputChange} />
                                                        </div>

                                                        <div className="clear"></div>


                                                        <div className="clear"></div>

                                                        <div className="col_half">
                                                            <label htmlFor="template-contactform-message">Message <small>*</small></label>
                                                            <textarea className="required sm-form-control" id="template-contactform-message" name="message"  value={this.state.message} rows="6" cols="30" onChange={this.handleInputChange}></textarea>
                                                            <span className={this.state.messageError ? 'help-block error': '' }>{ this.state.messageError ? this.state.messageError: '' }</span>
                                                        </div>

                                                        <div className="col_full">
                                                            <button className="button button-3d nomargin" type="submit" id="contactform-submit" name="contactform-submit">Send Message</button>
                                                        </div>

                                                    </form>

                                                </div>


                                            </div>
                                            <div className="modal-footer">
                                                <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </section>

            </DefaultLayout>
        );  
    }
}