美文网首页
React 页面加载后自动执行onClick事件

React 页面加载后自动执行onClick事件

作者: BlinglingSam | 来源:发表于2019-10-12 15:26 被阅读0次

报错: Warning: Cannot update during an existing state transition (such as within render)

 <Button className={placeTime.length > 1 ? styles.delBtn : styles.delFirst} 
                  onClick={this.onRemove (index)}>
  <Icon type={'delete'}/>删除
</Button>
)


 onRemove = (index) => {
    const { placeTime } = this.state
    console.log(placeTime, index);
    placeTime.splice(index, 1)
    this.setState({
      placeTime
    })
  }

删除按钮绑定的onRemove点击事件,想要带着参数index去执行,但这种操作是不允许的,刚好在事件函数中也有setState操作,这样就会陷入到死循环中,不停的改变state,render()又不停的被执行。

解决方案

// 一
 <Button className={placeTime.length > 1 ? styles.delBtn : styles.delFirst} 
                  onClick={()=>this.onRemove (index)}>
  <Icon type={'delete'}/>删除
</Button>
// 二
 <Button className={placeTime.length > 1 ? styles.delBtn : styles.delFirst} 
                  onClick={this.onRemove .bind(this,index)}>
      <Icon type={'delete'}/>删除
    </Button>

相关文章

  • React 页面加载后自动执行onClick事件

    报错: Warning: Cannot update during an existing state trans...

  • Taro UI ——AtButton坑点

    TaroUI的AtButton有个onClick事件,在这个onClick事件里面去执行react的setStat...

  • 1

    1.页面加载完之前执行 2.页面加载后执行 3.页面加载后执行 4.页面加载后执行

  • js&JQuery

    内容回顾 JS开发步骤确定事件(onclick鼠标点击事件,onsubmit表单的提交事件,onload页面加载完...

  • react初识

    react响应式-通过数据自动加载dom,数据变化 页面变化 1、constructor:最先被执行的参数 2、定...

  • 2021-vue-基础语法

    1、mounted 当页面加载完自动执行的函数setInterval 定时器方法 2、v-v-on :绑定事件...

  • React.js快速入门

    新建React项目 执行如下命令创建并运行一个新的React单页面应用,应用在本地启动后会自动打开浏览器并加载,如...

  • onload事件

    sample 当页面载入完毕后执行Javascript代码: 定义和用法 onload 事件会在页面或图像加载完成...

  • 6.javascriptDoM事件-第三章事件类型

    1.鼠标事件 -onload:页面加载时触发-onclick:鼠标点击时触发-onmouseover:鼠标滑过时触...

  • Vue 2

    钩子函数,表示在页面加载之后就执行代码 mounted 通过控制dom自动获取焦点 在页面加载完成之后执行代码...

网友评论

      本文标题:React 页面加载后自动执行onClick事件

      本文链接:https://www.haomeiwen.com/subject/bdbqmctx.html