Taro: onClick方法被频繁调用，不停给服务器发请求

[JackonLiu]

问题描述
[问题描述：站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]
按钮点击事件在view渲染时onClick方法被频繁调用，不停给服务器发请求，停止运行在浏览器还是不停发送请求

复现步骤
[复现问题的步骤]

1. Go to 开门列表
2. 还没有点击 开门按钮
3. See error

import Taro, {Component} from '@tarojs/taro'
import {View} from '@tarojs/components'
import isEmpty from 'lodash/isEmpty'
import './index.scss'
import {AtButton, AtIcon, AtList} from "taro-ui";
import {connect} from "@tarojs/redux";
@connect(({door, loading}) => ({
...door,
openDoor: loading.effects["door/openDoor"],
}))
export default class Door extends Component {
constructor (props) {
super(props)
console.log(props)
}

    * openDoor ({payload}, { call, put }) {
      console.log(payload);
      let token = Taro.getStorageSync('auth');
      let { code, page} = yield call(request, {
        url: config.host.api + '/sys/facilityManage/openDoor',
        method: 'post',
        header: {
          Authorization: `Bearer ${token}`,
          "content-type": "application/json",
          "cache-control": "no-cache",
        },
      });
      if (code === 0) {
        yield put({
          type: 'list',
          payload: page
        })
      }
    },

``
期望行为
期望点击按钮再触发点击事件，而不是打开页面直接触发
报错信息

[这里请贴上你的完整报错截图或文字]

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

• 操作系统: [ Windows 7]
  � Taro v1.2.22

  Taro CLI 1.2.22 environment info:
  System:
  OS: Windows 7
  Binaries:
  Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
  Yarn: 1.15.2 - C:\Users\lenovo\AppData\Roaming\npm\yarn.CMD
  npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  npm run dev:h5
  补充信息
  出现这个问题的原因可能在点击事件这里，但是无论我在哪里调用这个方法都会出现频繁请求
  我把调用的方法放在onPullDownRefresh也会频繁请求
  已经排除了js和路由的问题，也不是后端的问题

[taro-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[huiyuye]

是你调用的方式错了，onClick={ this.onPoor() }, 这样是不管点击不点击，onPoor都是会被调用的，因为你加了（），所以在渲染的时候，就会执行。onClick={() => this.onPoor() }，这样试试吧

[zhixiaoqiang]

react文档也建议好好看下， 不要在触发事件上写可直接执行的方法
如下：
onClick={() => this.onpenDoor(item) }
onClick={this.onpenDoor.bind(this, item)}

[taro-bot[bot]]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[JackonLiu]

是你调用的方式错了，onClick = {this.onPoor（）}，这样是不管点击不点击，onPoor都是会被调用的，因为你加了（），所以在渲染的时候，就会执行。 onClick = {（）=> this.onPoor（）}，这样试试吧
我这样写成功解决问题 onClick={()=> this.onPoor(this.openDoor(item))}
但是又有一个新问题
Uncaught TypeError: _this2.onPoor is not a function

[zhixiaoqiang]

是你调用的方式错了，onClick = {this.onPoor（）}，这样是不管点击不点击，onPoor都是会被调用的，因为你加了（），所以在渲染的时候，就会执行。 onClick = {（）=> this.onPoor（）}，这样试试吧
我这样写成功解决问题 onClick={()=> this.onPoor(this.openDoor(item))}
但是又有一个新问题
Uncaught TypeError: _this2.onPoor is not a function

这样写
onClick={() => this.openDoor(item) }
onClick={this.openDoor.bind(this, item)}

[JackonLiu]

是你调用的方式错了，onClick = {this.onPoor（）}，这样是不管点击不点击，onPoor都是会被调用的，因为你加了（），所以在渲染的时候，就会执行。 onClick = {（）=> this.onPoor（）}，这样试试吧
我这样写成功解决问题onClick = {（）=> this.onPoor（this.openDoor（item））}
但是又有一个新问题
Uncaught TypeError：_this2.onPoor不是函数

这样写
onClick = {（）=> this.onpenDoor（item）}
onClick = {this.onpenDoor.bind（this，item）}
可以了，感谢您的回复