weapp，使用mobx后，在遍历里面 拿不到ref

[jiege1]

weapp，使用mobx后，在遍历里面 拿不到ref
使用mobx后，组件加上了@observer，组件内部遍历的ref拿不到

复现步骤

import Taro from '@tarojs/taro';
import {View} from '@tarojs/components';
import {observer} from '@tarojs/mobx';

// @observer // 这里注释
export default class Test extends Taro.Component {
  
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <View>
        <View
          ref={ref => {
            console.log('ref-out', ref); //  这里执行，能拿到ref
          }}
        >111111</View>
        {
          [0, 1, 2].map((item, index) => {
            return (
              <View key={item}
                ref={ref => {
                  console.log(index); //  这里执行，能拿到ref
                  console.log(`ref-in-${item}`, ref);
                }}
              >{item}</View>
            )
          })
        }
      </View>
    );
  }
  
}

```js

```js
import Taro from '@tarojs/taro';
import {View} from '@tarojs/components';
import {observer} from '@tarojs/mobx';

@observer // 这里不注释
export default class Test extends Taro.Component {
  
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <View>
        <View
          ref={ref => {
            console.log('ref-out', ref); //  这里执行，能拿到ref
          }}
        >111111</View>
        {
          [0, 1, 2].map((item, index) => {
            return (
              <View key={item}
                ref={ref => {
                  console.log(index); //  why? 这里不执行，拿不到ref
                  console.log(`ref-in-${item}`, ref);
                }}
              >{item}</View>
            )
          })
        }
      </View>
    );
  }
  
}
```js

**系统信息**
  Taro CLI 1.3.0-beta.5 environment info:
    System:
      OS: macOS 10.14.3
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 9.1.0 - ~/.nvm/versions/node/v9.1.0/bin/node
      Yarn: 1.3.2 - ~/.nvm/versions/node/v9.1.0/bin/yarn
      npm: 5.8.0 - ~/.nvm/versions/node/v9.1.0/bin/npm
    npmPackages:
      @tarojs/async-await: ^1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/components: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/mobx: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/mobx-h5: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/mobx-rn: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/plugin-babel: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/plugin-csso: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/plugin-less: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/plugin-sass: ^1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/plugin-uglifyjs: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/rn-runner: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/router: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/taro: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/taro-alipay: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/taro-h5: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/taro-swan: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/taro-tt: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/taro-weapp: 1.3.0-beta.5 => 1.3.0-beta.5 
      @tarojs/webpack-runner: 1.3.0-beta.5 => 1.3.0-beta.5 
      eslint-config-taro: 1.3.0-beta.5 => 1.3.0-beta.5 
      eslint-plugin-taro: 1.3.0-beta.5 => 1.3.0-beta.5 
      nervjs: ^1.4.0-beta.3 => 1.4.0-beta.4 

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[lighthx]

遇到这个问题，有修复吗？ 拿不到ref

[Chen-jj]

@lighthx 这条记录的意思是已经修复

[lighthx]

我刚重现了错误

renderTeachers() {
    const {courseListStore: {teacherImages}} = this.props;
    return (
      <Container className='swipeItem'>
        {teacherImages.length>0&&<Swiper className='swipeItem' onChange={this.onTeacherChange}>
          {teacherImages.map((v: string, i: number) => {
            return (
            <SwiperItem key={i}>
              <MediaView src={v}
                         mode='aspectFill'
                         custom-class='swipeItem'
                         ref={v=>{console.log(v)}}
              />
            </SwiperItem>
          )}
          )}
        </Swiper>}
      </Container>
    )
  }

mobx报错ReferenceError: __isRunloopRef is not defined
@tarojs/* 的版本号都是1.3.15
node 8.16.0
macos 10.14.6

[Chen-jj]

@lighthx 版本号，平台，整理下代码格式。

[lighthx]

MediaView是自定义组件，替换成@tarojs/components下面的Image也是一样的报错

[Chen-jj]

@lighthx 哪个端

[lighthx]

@Chen-jj weapp

[nanjingboy]

@lighthx 无法复现，请提供一个可以重现的 demo，或更新到最新版本再试试。

[lighthx]

找到问题了，跟mobx没有关系，只是不能再非render的函数下面遍历ref，不然会报错,例如这样就会报错

  renderContent() {
    const a = [1, 1, 1, 1]
    return (
      <Swiper>
        {a.map((_: any, i: number) => <SwiperItem key={i}><View ref={z => console.log(z)}>{i}</View></SwiperItem>)}
      </Swiper>
    )
  }

  render() {
    return (
      <View className='index'>
        {this.renderContent()}
      </View>
    )
  }

[taro-bot]

Hello~

您的问题我们无法复现。如果有空的话还请拔冗提供一个简单的复现 demo，否则这个 issue 将在 15 天后被自动关闭。

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

Good luck and happy coding~

[lighthx]

@nanjingboy 哈？

[nanjingboy]

@Chen-jj

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'

export default class Index extends Component<any> {

  renderContent() {
    const a = [1, 1, 1, 1]
    return (
      <View>
        {a.map((_: any, i: number) => <View key={i}><View ref={z => console.log('ref:', z)}>{i}</View></View>)}
      </View>
    )
  }

  render() {
    return (
      <View>
        {this.renderContent()}
      </View>
    )
  }
}

报错信息如下：

微信、支付宝、百度都如此，有空看下喽。

[taro-bot]

CC @yuche

[Chen-jj]

Taro3 应该没有这个问题了。