[setState在使用计算所得的属性名称时不起作用

Question

我正在尝试根据传递给handleTime方法的参数来更新状态，因此我已经使用计算出的属性名称来执行更新（使用以前的状态），但是setState（在handleTime方法中）不起作用。] >

这里是状态：

const sessionLength = {min: 25,
      sec: 0}
    this.state = {
      breakLength: {min: 5, sec: 0},
      sessionLength: sessionLength,
      sessionProcessed: sessionLength,
      actualState: 'Session'
    }
handleTime方法负责更新状态，而play方法是单击事件处理程序方法，该方法使用参数（要更新的属性名称）调用handleTime。
handleTime(str="sessionProcessed"){
    this.setState(state=>({[str]: {...state.[str], sec: state.[str].sec - 1}}));
    }
play(){
    if(typeof this.intervalId === 'undefined'){
      this.intervalId = setInterval(this.handleTime.bind(this),1000);
      this.setState({intervalId: this.intervalId});
    }
  }
The JSX
render(){
    return(
      <div class="ml-5">
        <div>{this.state.actualState}</div>
        <div><strong id="session">{this.state.sessionProcessed.min}:{this.state.sessionProcessed.sec}</strong></div>
        <div><i id="play" class="fa fa-play" onClick={this.play}></i> <i id="pause" class="fa fa-pause" onClick={this.pause}></i></div>
      </div>
    )
  }
}
这是我的codepen：[i] https://codepen.io/elamine370/pen/MWKWxBo?editors=0010

我正在尝试根据传递给handleTime方法的参数来更新状态，所以我已经使用计算出的属性名称来执行更新（使用先前的状态），但是setState（在...内）

< [

您不能使用点符号访问或设置计算的键值，您只需为其使用括号符号。

例如

handleTime(str="sessionProcessed"){
    this.setState(state=>({[str]: {...state[str], sec: state[str].sec - 1}}));
}

我刚刚删除了state.[str]中的点，因为那样会引发错误，因此您很可能没有正确设置这些属性。
尝试更改这些内容，看看是否可以解决问题。
ref：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

Answer 1

您不能使用点符号访问或设置计算的键值，您只需为其使用括号符号。