关于Repeat的一个Bug

[TJ-XiaJiaHao]

Description

今天当我尝试使用两层repeat来渲染一个二维数组时，遇到了未知的bug，代码比较简单，子组件是一个按钮，当点击后触发btnTap自定义事件，具体代码如下：

// 父组件 index
<repeat for={{searchKeywords}} item="keywords">
  <repeat for="{{keywords}}" item="keyword">
    <btnRadius :text="keyword"></btnRadius>
  </repeat>
</repeat>

 data = {
      searchKeywords: [["测试1", "测试2", "测试3"], ["测试4", "测试5", "测试6"]]
    }

// 子组件 RadiusButton
<template>
  <button class="btn-radius" @tap="btnTap">{{text}}</button>
</template>

<script>
  import wepy from 'wepy';

  export default class RadiusButton extends wepy.component {
    props = {
      text: {
        type: String,
        default: ''
      }
    }
    methods = {
      btnTap() {
        console.log('btnTap',this);
        this.$emit('btnTap', this.text);
      }
    }
  }
</script>

当点击按钮后控制台抛出的Bug：

WAService.js:3 thirdScriptError
Cannot read property '2' of undefined;at pages/index page $btnRadius$btnTap function
TypeError: Cannot read property '2' of undefined
    at http://127.0.0.1:9973/appservice/npm/wepy/lib/component.js:125:81
    at RadiusButton.value (http://127.0.0.1:9973/appservice/npm/wepy/lib/component.js:126:12)
    at e.n.(anonymous function) (http://127.0.0.1:9973/appservice/npm/wepy/lib/base.js:36:14)
    at e.<anonymous> (http://127.0.0.1:9973/appservice/__dev__/WAService.js:15:21527)
    at e.a (http://127.0.0.1:9973/appservice/__dev__/WAService.js:15:16414)
    at J (http://127.0.0.1:9973/appservice/__dev__/WAService.js:15:10828)
    at Function.<anonymous> (http://127.0.0.1:9973/appservice/__dev__/WAService.js:15:12417)
    at http://127.0.0.1:9973/appservice/__dev__/WAService.js:15:17917
    at http://127.0.0.1:9973/appservice/__dev__/WAService.js:6:13087
    at e.(anonymous function) (http://127.0.0.1:9973/appservice/__dev__/WAService.js:4:2997)

当经过千百次尝试后，突然发现如下情况下控制台不再抛出bug，但是，虽然传入的text正常显示到了网页上，但是点击后子组件中的this.text是null

<repeat for={{searchKeywords}} item="keywords" key="index" index="index1">
      <repeat for="{{keywords}}" item="keyword" key="item" index="index2">
        <btnRadius :text="keywords[index2]"></btnRadius>
      </repeat>
    </repeat>

子组件中的text，props中看起来正常，但是this.text获取的是null

props:
  text:
    default: ""
    index: "index2"
    item: "keyword"
    key: "item"
    repeat:"keywords"
    type:[ƒ]
    value:"keywords[index2]"
text: undefined

[fantasy525]

:text="keywords[index2]"

props不支持. []等

[cuijiemmx]

@justPlay197 尽量别用repeat，使用repeat的时候wepy的组件嵌套就是个坑，而且一旦掉进去现在跟本没有方案解决
像你这种repeat标量数组的完全可以用wx:for，repeat唯一的用处就是传递object，然这个场景下bug多，而且都没有解决
我准备把对象都放进全局的store里，然后使用wx:for传递对象的id的方式进行组件嵌套

[TJ-XiaJiaHao]

@cuijiemmx 如果用wx:for的话组件会出现共享数据的情况，官方也有说明如果是循环渲染组件，必须要用repeat，验证之下确实多维数组下repeat存在bug，多层对象下repeat运行正常

[cuijiemmx]

@justPlay197 repeat看来是绕不开的，我原本以为用wx:for能传标量到自定义子组件里，后来发现不行，只要是循环自定义组件的地方，必须得用repeat，相应的有几个已知问题，循环的所有组件中 computed计算值相同，动态传值得用:xx.sync="yyy"，yyy中只能是简单字符串，这导致组件多层嵌套受到种种限制很难做，目前我就是卡在这样的问题上。

[secreter]

me too

[idseventeen]

@cuijiemmx 请问你现在有解决方案了吗？我也卡在循环自定义组件的地方，repeat自定义组件，script内传过来的值没有变化，而template内能接收到

[TJ-XiaJiaHao]

@ishen7 可不可以贴一下代码

[cuijiemmx]

@ishen7 方案就是repeat的组件内不要用computed，也不要用data（一样的问题），可以用props，把数据按组件的需求规整好再传进去
组件内部事件处理的地方用props传入的值

[Gcaufy]

1.7.2的版本中支持了原生组件，大家可以试一下这个版本，应该能解决repeat下的一些问题：

安装使用：

npm install wepy-cli@1.7.2-alpha1 -g
npm install wepy@1.7.2-alpha1 --save
wepy build --no-cache

文档说明：https://github.com/Tencent/wepy/blob/component/docs/md/doc.md#%E7%BB%84%E4%BB%B6
迁移参考：wepyjs/wepy-wechat-demo@5f84a3a

[chenillen]

用了1.7.2-alpha1，沒法解決雙重 repeat 之後 index 的問題。

[hanwenbo]

@cuijiemmx bug太多 不知道咋整 明早试试原生去 wepy貌似不适合开发复杂的应用，等过段时间再看看2.x是否能解决， 新项目打算先用原生顶着 老的还用wepy

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. 因为这个 Issue 最近没有任何有效回复，所以被自动标记为了stale。 如果在未来7天依旧没有任何激活操作，那么该 Issue 将会被自动关闭。 感谢您的提问。

[Faye-Xiao]

我也遇到了这个问题，查了一天资料，问了好多人，没解决问题。回过头去看文档发现官方有说明这点，“不支持在 repeat 的组件中去使用 props, computed, watch 等等特性”。存在的问题

[xiaomizhou66]

@ishen7 可不可以贴一下代码

请问最后是怎么渲染二维数组的呀