Taro: 给 map 渲染的组件加上 key 时，列表打乱刷新几次后出现匿名函数作用域传值紊乱

Created on 7 Jun 2019 · 9Comments · Source: NervJS/taro

问题描述
使用 {array.map(...)} 渲染组件列表。为提高渲染效率，给 map 渲染的组件加上 key。但发现加上后，出现在匿名函数中由上级作用域传进的值非预期的问题。

复现步骤

复现代码如下：

import Taro, { Component, Config } from "@tarojs/taro";
import { View, Text, Button } from "@tarojs/components";
import "./index.less";

export interface IndexState {
  items: string[];
}

const samples: string[] = ["name", "pity","simple", "back off","total","point","now"];

export default class Index extends Component<{}, IndexState> {
  config: Config = {
    navigationBarTitleText: "首页"
  };

  state: IndexState = {
    items: []
  };

  render() {
    return (
      <View className="index">
        <Text>Hello world!</Text>
        <Button onClick={this.onButtonClick}>Generate random items</Button>
        {this.state.items.map(item => {
          return (
            <Text
              key={item}
              onClick={() => {
                console.log(item);
              }}
            >
              {item}
            </Text>
          );
        })}
      </View>
    );
  }

  private onButtonClick = () => {
    let items: string[] = shuffle(samples);

    this.setState({
      items
    });
  };
}

// 打乱数组
function shuffle<T>(arr: T[]): T[] {
  for (var i = 1; i < arr.length; i++) {
    var _random = Math.floor(Math.random() * (i + 1));
    var _ref = [arr[_random], arr[i]];
    arr[i] = _ref[0];
    arr[_random] = _ref[1];
  }
  return arr;
}

运行小程序后，多次点击 "Generate random items"
点击打乱的列表中的各项，会发现 console.log(item) 在控制台输出的字符串与该项在屏幕上渲染的字符串不一致！
删除列表组件的 key 属性，行为恢复正常

期望行为
行为与 React 一致，作用域值传递正常，不因为加上 key 而导致行为异常。

报错信息
(无报错)

系统信息
Taro CLI 1.3.0-beta.6 environment info:
System:
OS: Windows 10
Binaries:
Node: 10.13.0 - D:\Dev\Env\NodeJs\node.EXE
Yarn: 1.16.0 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.4.1 - D:\Dev\Env\NodeJs\npm.CMD

补充信息
不确定原因，大致猜测与转译后语义差异有关。

Source