Javascript 当我使用计算键修改状态对象时，我是否在改变状态？

因此，我尝试使用React执行实时表单验证

我有一个单选按钮，询问用户是否已有网站。如果他的答案是肯定的，我需要验证现有的网站文本输入。如果答案是否，我不需要验证现有的网站字段并允许用户提交

此.state.redesign由单选按钮yes和no控制

在componentDidUpdate中，我检查重新设计是否已更改。如果有，我通过调用this.validate（'existing_website'）再次执行验证

validate函数检查this.state.redesign是否为true，this.state.exsting_网站==“”。如果是，则将该输入字段的validation_error设置为true

我无法达到预期的结果。当我单击“是”单选按钮时，“提交”按钮仍处于活动状态

在中，我可以看到，当我单击“是”时，会调用componentDidUpdate，这也是。validate（'existing_website'）

线路

this.setState({[input_name]:input},()=>{  
        console.log(this.state[input_name]);
});

在验证中，函数还记录我看到this.state.existing_website.validation_error设置为true的更新状态

但在此之后，组件不会重新启动，并且按钮保持激活状态

知道为什么会这样吗？请帮帮我，伙计们！先谢谢你。下面是我的完整代码

constructor(props){
  super(props);
  this.state={
    existing_website:{value:'',validate:true,validation_error:false,validation_message:"This field is necessary if you have selected yes above."},
    redesign:false
  }
  this.validate = this.validate.bind(this);
}
getLabelAndInput(label,type,input_name){
     var field= <input type={type} name={input_name} value={this.state[input_name].value} onChange={(e)=>this.setInputValue(input_name,e.target.value)} onBlur={()=>this.inputBlur(input_name)} onFocus={()=>this.inputFocus(input_name)} className="width-100"/>
     return (
        <div className={"form-group"}>
          <label>{label}</label>
          {field}
          {this.state[input_name].validation_error?
            <p className="error">{this.state[input_name].validation_message}</p>
            :
            ''
          }
        </div>
      );
}
validate(input_name){
      var input = Object.assign({},this.state[input_name]);
      if(input.validate){
          if(input_name=="existing_website"){
          if(this.state.redesign && input.value==""){
            console.log('existing website validation error')
            input.validation_error = true;
          }
          else{
            console.log('existing website no validation error')
            input.validation_error = false;
          }
        }
      }
      this.setState({[input_name]:input},()=>{  
        console.log(this.state[input_name]);
      }); // Is this line mutating the state??
}
componentDidUpdate(prevProps,prevState){
      if(prevState.redesign != this.state.redesign){
        console.log('redesign change')
        this.validate('existing_website');
      }
}
render(){
    console.log(this.state.existing_website.validation_error);
    let btnSubmit = <button type="button" className="btn btn-primary" onClick={()=>this.handleSubmit()}>Submit</button>
    if(this.state.existing_website.validation_error){
        btnSubmit = <button type="button" className="btn btn-secondary" disabled>Submit</button>
    }
    return(
            <div className="form-group">

               <label className="highlight">Do you already have a website?</label>
               <span onClick={()=>this.setState({redesign:false},()=>{this.likedWebsitesRef.current.focus()})}><input type="radio" name="redesign" checked={!this.state.redesign}/> <span className="service_type_text">No</span></span>
               <span onClick={()=>this.setState({redesign:true})}><input type="radio" name="redesign" checked={this.state.redesign}/> <span className="service_type_text">Yes</span></span>

            </div>

           { this.state.redesign &&

              <div className="form-group">
                  {this.getLabelAndInput('Link to existing website','text','existing_website')}
              </div>

            }

            {btnSubmit}
    );
}

构造函数（道具）{
超级（道具）；
这个州={
现有的\u网站：{值：“”，验证：真，验证\u错误：假，验证\u消息：“如果您在上面选择了“是”，则此字段是必需的。”}，
重新设计：错误
}
this.validate=this.validate.bind（this）；
}
getLabelAndInput（标签、类型、输入名称）{
var field=this.setInputValue（input_name，e.target.value）}onBlur={（）=>this.inputBlur（input_name）}onFocus={（）=>this.inputFocus（input_name）}className=“width-100”/>
返回(
{label}
{field}
{this.state[输入\名称]。验证\错误？
{this.state[输入\名称].验证\消息}
:
''
}
);
}
验证（输入\u名称）{
var input=Object.assign（{}，this.state[input_name]）；
if（input.validate）{
如果（输入_名称==“现有_网站”）{
if（this.state.redesign&&input.value==“”）{
console.log（'现有网站验证错误'）
input.validation\u error=true；
}
否则{
console.log（'现有网站无验证错误'）
input.validation\u error=false；
}
}
}
this.setState（{[input\u name]：input}，（）=>{
console.log（这个.state[input_name]）；
})；//这一行是否改变了状态？？
}
componentDidUpdate（prevProps、prevState）{
if（prevState.redesign！=此.state.redesign）{
console.log（'重新设计更改'）
验证（“现有_网站”）；
}
}
render（）{
console.log（this.state.existing\u website.validation\u error）；
让btnSubmit=this.handleSubmit（）}>Submit
if（this.state.existing\u website.validation\u error）{
btnSubmit=提交
}
返回(
你已经有网站了吗？
this.setState（{redesign:false}，（）=>{this.likedWebsitesRef.current.focus（）}）否
this.setState（{redesign:true}}>Yes
{this.state.redesign&&
{this.getLabelAndInput（'Link to existing website'、'text'、'existing_website'））
}
{btnSubmit}
);
}

编辑： My console.log输出：

下面的布尔值来自渲染函数中的console.log，表示this.state.existing\u website.validation\u error的值

false//由于此.state.redesign中的更改，第一次重新加载

重新设计更改//console.log-in组件由于上述更改而更新

现有网站验证错误//调用了验证函数

false//再次渲染。这是在下面的this.setState while console.logs之后发生的

{value:，突出显示：true，validate:true，validation\u错误：false，validation\u消息：“如果您在上面选择了yes，则此字段是必需的。”}

---

//这之后再也没有重播了

我的最佳猜测是，在componentDidUpdate中调用set state会导致重新呈现，从而导致componentDidUpdate再次触发，这可能会导致validate fn被调用两次，一次是以一种方式设置状态，另一次是将其设置回原位。我建议添加断点以查看发生了什么。我对此表示怀疑，因为只有在“重新设计”与prevState不同的情况下才会调用set state。在验证中，我不会在任何地方更改重新设计。