React新手求助：解决map中React-Switch禁用启用的栈溢出问题

嗨，我来帮你搞定这个问题！你遇到的“maximum call stack size exceeded”错误，根源在于**componentWillUpdate生命周期里调用setState导致了无限循环**——每次组件要更新时，这个钩子会触发，你在里面修改状态又会触发新一轮的组件更新，反复循环直到调用栈撑爆。

问题分析 #

componentWillUpdate是在组件即将更新前执行的方法，如果你在这里调用setState，会立刻触发新的更新流程，形成无限循环。而且这个生命周期在React 16.3之后已经被标记为过时，不推荐使用了。

解决方案：把启用逻辑移到输入事件处理中 #

我们不需要依赖生命周期来判断输入状态，直接在输入框的onChange事件里处理Switch的禁用状态就好，这样既高效又不会触发循环。

步骤1：创建统一的输入处理方法

替换原来每个输入框单独的setState，写一个通用方法来更新输入值，同时判断是否要启用Switch：

handleInputChange = (fieldName, value) => {
  this.setState({
    [fieldName]: value
  }, () => {
    // 这里可以自定义启用条件：比如仅keyValues不为空，或者三个输入框都有值
    const isInputFilled = this.state.keyValues !== '';
    // 如果输入满足条件，就启用Switch（disable设为false），否则保持禁用
    this.setState({ disableSwitch: !isInputFilled });
  });
}

步骤2：修改输入框的onChange事件

把三个输入框的onChange都改成调用这个统一方法：

// keyValues输入框
<input 
  type='text' 
  onChange={(e) => this.handleInputChange('keyValues', e.target.value)} 
  className='settings-jira-textfield' 
/>

// tokenValues输入框
<input 
  type='text' 
  onChange={(e) => this.handleInputChange('tokenValues', e.target.value)} 
  className='settings-jira-textfield' 
/>

// urlValues输入框
<input 
  type='text' 
  onChange={(e) => this.handleInputChange('urlValues', e.target.value)} 
  className='settings-jira-textfield' 
/>

步骤3：移除有问题的componentWillUpdate方法

直接删掉这个生命周期函数，它现在完全没用了，还会引发问题。

额外优化：修复Switch的状态同步

你的toggleFunction里没有更新checked状态，点击Switch后按钮不会切换状态，建议加上：

toggleFunction = (id ) =>{ 
  let data =[]; 
  let loggedInUserEmail = JSON.parse(localStorage.loggedInUserDetails).email; 
  data.push({ 
    projectId : id, 
    keyValues : this.state.keyValues, 
    urlval : this.state.urlValues, 
    tokens : this.state.tokenValues, 
    email : loggedInUserEmail 
  }) 
  if(this.state.keyValues !== ''){ 
    this.props.dispatch(abc(data));
    // 点击后更新Switch的选中状态
    this.setState(prevState => ({ checked: !prevState.checked }));
  } 
}

为什么这样有效？ #

现在每次输入变化时，我们先更新对应输入字段的状态，然后在状态更新完成的回调里判断是否满足启用Switch的条件，只在需要时修改disableSwitch状态，不会触发无限循环，逻辑也更清晰。

内容的提问来源于stack exchange，提问作者Sukanya G