React切换抽屉状态报错TypeError: drawer.setState is not a function如何解决

核心错误原因 #

• 你代码中操作的drawer是存储在组件state中的普通JS对象，并非React类组件实例，只有React类组件实例才拥有setState方法，直接调用普通对象的setState自然会抛出类型错误。
• 你在onClick中直接写onClick={this.handleToggle(drawer)}的写法有误，会在组件渲染阶段直接执行该函数，而非用户点击时触发。

修复步骤 #

1. 修改handleToggle逻辑，通过更新组件根state修改抽屉状态 #

React中state的修改必须通过组件实例的setState方法执行，你需要遍历更新整个drawers数组：

handleToggle = (targetHeading) => {
  this.setState(prevState => ({
    drawers: prevState.drawers.map(drawer => {
      // 匹配到目标抽屉时更新open状态，其余抽屉保持原有状态
      if (drawer.heading === targetHeading) {
        return { ...drawer, open: !drawer.open }
      }
      return drawer
    })
  }))
}

注：以上代码使用drawer.heading作为抽屉的唯一标识，如果你的业务中存在heading重复的情况，可以换成其他唯一字段，或者在初始化drawers数组时为每个项添加唯一id。

2. 修正onClick事件绑定 #

用箭头函数包裹事件回调，保证只有点击时才会执行状态更新逻辑：

<div 
  className={`flex items-center self-end justify-center w-12 h-12 ml-auto transform border border-white rounded-full toggle-btn cursor-pointer ${drawer.open ? 'open' : ''}`} 
  onClick={() => this.handleToggle(drawer.heading)}
>
  <span className="w-6 h-6 overflow-hidden transition-transform duration-75 transform toggle"></span>
</div>

优化建议 #

你已经使用箭头函数声明handleToggle，它会自动绑定当前组件实例的this，所以constructor中的this.handleToggle = this.handleToggle.bind(this)属于冗余代码，可以直接删除。

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