React中ES6计算属性相关问题：第四个调节按钮无法递减

Hey there, let's break down why your fourth caret button's decrement action isn't working. Based on the code snippets you shared, here are the key issues to check and fix:

1. 未完成的递减逻辑（最可能的原因） #

看你贴的handleAdjuster函数，else if (action === "minus")分支只写了this.setState...就中断了——完全缺失了实际的递减计算逻辑！你需要镜像加法逻辑，把「加间隔」改成「减间隔」，修复后的代码如下：

handleAdjuster(action, type) {
  if (action === "add") {
    this.setState({
      [`current_${type}`]: this.state[`current_${type}`] + this.state[`${type}_interval`]
    });
  } else if (action === "minus") {
    // 补全完整的递减逻辑
    this.setState({
      [`current_${type}`]: this.state[`current_${type}`] - this.state[`${type}_interval`]
    });
  }
}

如果这段代码有语法错误（比如缺括号）或者根本没写完，递减操作就会无声失效。

2. this指向丢失问题 #

你在构造函数里注释掉了this.handleAdjuster = this.handleAdjuster.bind(this);。如果你的按钮事件绑定是直接写onClick={this.handleAdjuster}这种形式，handleAdjuster里的this会变成undefined（严格模式下），导致无法调用this.setState。

可以用两种方式修复：

• 取消构造函数里的绑定代码注释：

  constructor(props) {
    super(props);
    this.containerWidth = props.width || "100%";
    this.state = {
      current_hour: 0,
      current_minute: 0,
      hour_interval: 1,
      minute_interval: 1
    };
    // 重新启用这行绑定代码
    this.handleAdjuster = this.handleAdjuster.bind(this);
  }
  

• 把handleAdjuster改成箭头函数（自动绑定this）：

  handleAdjuster = (action, type) => {
    // 这里放你的原有逻辑
  }
  

3. 事件参数传递错误 #

仔细检查递减按钮的事件绑定，确认传递给handleAdjuster的action参数是准确的"minus"字符串，type参数是"hour"或"minute"（和state里的字段对应）。如果传成了"min"或者错误的类型，递减分支根本不会触发。

举个正确的参数传递例子：

// 小时递减按钮
<button onClick={() => this.handleAdjuster("minus", "hour")}>- 小时</button>
// 分钟递减按钮
<button onClick={() => this.handleAdjuster("minus", "minute")}>- 分钟</button>

4. 可选优化：使用函数式setState提升可靠性 #

React的setState是异步的，如果快速点击按钮，直接依赖this.state可能会拿到过期值。为了更可靠的更新，建议使用函数式setState：

handleAdjuster(action, type) {
  if (action === "add") {
    this.setState(prevState => ({
      [`current_${type}`]: prevState[`current_${type}`] + prevState[`${type}_interval`]
    }));
  } else if (action === "minus") {
    this.setState(prevState => ({
      [`current_${type}`]: prevState[`current_${type}`] - prevState[`${type}_interval`]
    }));
  }
}

这种写法能确保你始终使用最新的state值进行计算。

内容的提问来源于stack exchange，提问作者Sharon Chai