时间戳

首页 > 解决方案 > 使用计算属性名称时 setState 不起作用

javascript - 使用计算属性名称时 setState 不起作用

问题描述

我试图根据传递给 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});
    }
  }

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>
    )
  }
}

标签： javascriptreactjssetstate

解决方案

您不能使用点表示法访问或设置计算的键值，您需要简单地使用括号表示法。

例如

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

我刚刚删除了 中的点，state.[str]因为这会引发错误，因此您很可能没有正确设置这些属性。

尝试更改这些，看看它是否能解决问题。

参考：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

推荐阅读