绑定事件重复

[yulingogo]

相关平台

微信小程序

小程序基础库: 2.12.1
使用框架: React

复现步骤

renderCar = item => {
const { car_no, car_id } = item
return (
<View
className='crm-car-list-content-item'
key={car_id}
onClick={throttle(() => {
this.goEditCar(car_id, car_no)
}, 1000)}
>
...

期望结果

每个车辆卡片都绑定对应的点击事件，去到对应的编辑页

实际结果

每个卡片都去到最后一个车辆卡片的编辑页

环境信息

  Taro CLI 2.2.6 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 12.18.3 - D:\software\node\node.EXE
      Yarn: 1.22.4 - D:\software\node\node_global\yarn.CMD
      npm: 6.14.6 - D:\software\node\npm.CMD

---

补充信息

在render函数中利用map遍历渲染车辆卡片，能正常绑定事件，在自定义渲染函数中用map渲染车辆卡片列表，绑定的事件都将是最后一个卡片的事件

[ivan-94]

代码:

export default class Demo extends Taro.Component {
  renderItem(i) {
    return <View onClick={() => {}}>{i}</View>;
  }

  render() {
    return (
      <View>
        {[].map(i => {
          return this.renderItem(i);
        })}
      </View>
    );
  }
}

转译结果：

<template name="renderItem">
    <block>
        <view bindtap="anonymousFunc0">{{i}}</view> 🔴
    </block>
</template>
<block wx:if="{{$taroCompReady}}">
    <view>
        <template is="renderItem" data="{{...i.$loopState__temp2}}" wx:for="{{loopArray1}}" wx:for-item="i" wx:for-index="_anonIdx2"></template>
    </view>
</block>

    value: function _createItemData(_$uid) {
      var _this2 = this;

      return function (i) {
        _this2.anonymousFunc0 = function () {}; // 🔴 问题在这里

        return {
          i: i
        };
      };
    }
  }, {
    key: "_createData",
    value: function _createData() {
      var _this3 = this;

      this.__state = arguments[0] || this.state || {};
      this.__props = arguments[1] || this.props || {};
      var __isRunloopRef = arguments[2];
      var __prefix = this.$prefix;
      ;
      var loopArray1 = [].map(function (i, _anonIdx) {
        i = {
          $original: (0, _taroWeapp.internal_get_original)(i)
        };

        var $loopState__temp2 = _this3._createItemData(__prefix + "bzzzzzzzzz" + ("" + _anonIdx))(i.$original);

        return {
          $loopState__temp2: $loopState__temp2,
          $original: i.$original
        };
      });
      Object.assign(this.__state, {
        loopArray1: loopArray1
      });
      return this.__state;
    }
  }

所以暂时的建议：是不要将子 render 函数用在循环上

[yulingogo]

这只是一个避免的方法，我之前看编译结果，也知道最后都编译成了一个事件。但是taro有没有准备解决这个问题，现在3也出来了，我还没用过，希望能尽快解决这个问题。