使用map循环创建自定义组件，并通过函数创建 ref时，获取到的组件是上一个组件对象，并不是当前组件对象

[wangxv]

问题描述
使用map循环创建自定义组件，并通过函数创建 ref时，获取到的组件是上一个组件对象，并不是当前组件对象（视图已更新，但是获取到的是上一个）

复现步骤
1.使用map方法循环渲染自定义组件
2.改变当前显示的自定义组件的index
3.使用函数创建ref
4.通过函数获取ref
5.得到的是上一个组件对象

playerRef = (player: Player) => {
this.currentPlayer = player
}

    {
      videoList.map((item, index) => {
        return (
          <View key={'demo' + index} className='player-wrapper'>
            {
              index === videoIndex && (
                <Player
                  ref={this.playerRef}
                  videoId={'demo' + index}
                  url={item.url}
                  lowUrl={item.lowUrl}
                  standardUrl={item.standardUrl}
                  highUrl={item.highUrl}
                  ultraUrl={item.ultraUrl}
                  initialDuration={item.studyDuration}
                  duration={item.duration}
                  size={item.size}
                  isPreventDragForward={this.state.isPreventDragForward}
                  onNextBtnClick={this.onNextBtnClick}
                  isShowCoverLabel={true}
                  coverLabelTitle='继续学习'
                  coverLabelDesc='上次学习...'
                />
              )
            }
          </View>
        )
      })
    }

期望行为
获取当前组件对象

报错信息
得到的是上个player的对象

系统信息

• 操作系统: [e.g. Windows 10]
• Taro 版本 [e.g. v.1.2.7]
• Node.js 版本 [e.g. v5.6.0]
• 报错平台 [weapp]

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[yuche]

老哥你的代码格式崩了

[wangxv]

已重新编辑了一下

[yuche]

「上一个组件对象」是 index - 1 组件的意思吗？

[wangxv]

对，获取到的是上个组件，

[taro-bot]

CC @Chen-jj

[melyao]

想问一下 在循环自定义组件上使用ref 用的是函数方式创建 得到的是undefined 乍回事 是不是有啥讲究啊？

[Chen-jj]

@melyao 提供一下可复现代码

[melyao]

componentDidMount() {
const {collectStore} = this.props;
const { pageIndex } = this.state;
collectStore.getList(pageIndex,(res) => {
console.log(this.item);
});
}
public getRef(node: Item) {
this.item = node
}
{
list.slice().map((v: any, index: any) => (

<Item
ref={this.getRef}
collectionId={v.collectionId}
albumImg={v.buildingPic}
buildingProjectName={v.buildingProjectName}
price={v.buildingPrice}
address={v.cityDistrict}
houseInfo={v.houses}
buildingProjectId={v.buildingProjectId}
maxHouseArea={v.maxHouseArea}
minHouseArea={v.minHouseArea}
onCancel={this.onCancel}//1楼盘 2户型
>

))
}
taro ： 1.2.8

[Chen-jj]

@wangxv 问题已修复，可以在下个版本再尝试一下。

[Chen-jj]

@melyao 循环 ref 是可用的，你需要确保 CLI 和依赖包相同版本。

如果还有问题，可以提供一个完整可复现 demo 我们测试一下。

以下 demo 可取到循环 ref：

// 页面
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import Demo from '../../components/demo/demo'

export default class Detail extends Component {
  currentPlayer = []

  componentDidMount () {
    console.log('didmount: ', this.currentPlayer)
  }

  playerRef = (player) => {
    this.currentPlayer.push(player)
  }

  render() {
    return (
      <View>
      {
        [1, 2, 3].map((item, index) => (
          <View key={'demo' + index}>
            <Demo
              ref={this.playerRef}
              index={index}
            />
          </View>
        ))
      }
      </View>
    )
  }
}

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

export default class Demo extends Component {
  render() {
    return (
      <View>Demo: {this.props.index}</View>
    )
  }
}

[wangxv]

好的，感谢