wx:key="$original.id" does not look like a valid key name (did you mean wx:key="id" ?)

[seekcx]

问题描述 所有的循环列表中，小程序控制台都报这个警告，之前没有。

WXMLRT_$gwx:./pages/index/index.wxml:view:24:14: wx:key="$original.id" does not look like a valid key name (did you mean wx:key="id" ?)

实现代码：

private renderStore() {
  const { stores } = this.state;

  return (
    <View className="stores">
      {
        stores.map(store => {
          return (
            <View onClick={this.gotoStore.bind(this, store)} key={store.id} >
              <StoreItem store={store} />
              <Divider spacing={14.4} inContainer={true} />
            </View>
          );
        })
      }
    </View>
  );
}

复现步骤 [复现问题的步骤]

1. 用 map 创建一个循环视图
2. 打开小程序控制台

期望行为

消除警告

报错信息

系统信息

Taro CLI 1.3.22 environment info:
    System:
      OS: macOS 10.15
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 10.14.1 - ~/.nvm/versions/node/v10.14.1/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v10.14.1/bin/npm
    npmPackages:
      @tarojs/async-await: 1.3.22 => 1.3.18
      @tarojs/components: 1.3.22 => 1.3.22
      @tarojs/components-rn: 1.3.22 => 1.3.22
      @tarojs/mobx: 1.3.22 => 1.3.18
      @tarojs/mobx-h5: 1.3.22 => 1.3.18
      @tarojs/mobx-rn: 1.3.22 => 1.3.18
      @tarojs/plugin-babel: 1.3.22 => 1.3.18
      @tarojs/plugin-csso: 1.3.22 => 1.3.18
      @tarojs/plugin-sass: 1.3.22 => 1.3.22
      @tarojs/plugin-uglifyjs: 1.3.22 => 1.3.18
      @tarojs/rn-runner: 1.3.22 => 1.3.18
      @tarojs/router: 1.3.22 => 1.3.18
      @tarojs/taro: 1.3.22 => 1.3.22
      @tarojs/taro-alipay: 1.3.22 => 1.3.18
      @tarojs/taro-h5: 1.3.22 => 1.3.18
      @tarojs/taro-redux-rn: 1.3.22 => 1.3.22
      @tarojs/taro-rn: 1.3.22 => 1.3.18
      @tarojs/taro-router-rn: 1.3.22 => 1.3.22
      @tarojs/taro-swan: 1.3.22 => 1.3.18
      @tarojs/taro-tt: 1.3.22 => 1.3.18
      @tarojs/taro-weapp: 1.3.22 => 1.3.18
      @tarojs/webpack-runner: 1.3.22 => 1.3.22
      eslint-config-taro: 1.3.22 => 1.3.18
      eslint-plugin-taro: 1.3.22 => 1.3.18
      nerv-devtools: ^1.5.3 => 1.5.1
      nervjs: ^1.5.3 => 1.5.1
      react: 16.3.1 => 16.3.1
      react-native: 0.55.4 => 0.55.4
      stylelint-config-taro-rn: 1.3.22 => 1.3.18
      stylelint-taro-rn: 1.3.22 => 1.3.18

[taro-bot[bot]]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[Chen-jj]

@seekcx 复现不了，提供可复现项目吧。

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

export default class Detail extends Component {
  renderStore() {
    const stores = [{
      id: 1,
      name: 'a'
    }, {
      id: 2,
      name: 'b'
    }, {
      id: 3,
      name: 'c'
    }]

    return (
      <View>
        {
          stores.map(store => {
            return (
              <View key={store.id} >
                <A store={store}></A>
              </View>
            );
          })
        }
      </View>
    );
  }
  render () {
    return (
      <View>
        {this.renderStore()}
      </View>
    )
  }
}

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

export default class A extends Component {
  render () {
    return (
      <View>
        {this.props.store.name}
      </View>
    )
  }
}

[taro-bot[bot]]

Hello~

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

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

Good luck and happy coding~

[gogu]

我也出现了，开发者工具 1.02.1911052，Taro 1.20。昨天之前之前不出现

[taro-bot[bot]]

CC @yuche

[seekcx]

忙忘了，之前尝试过追 original 在哪加上的，貌似不应该加上，但是没找到，我自己创建了一个空项目也没法复现。

[gogu]

引用 taro-ui 第三方组件都会 warning

[rover95]

开发工具某次更新后出现的

[Garfield550]

Taro UI 的 AtCalendar 可以稳定复现，可能是组件引用比较复杂的问题？

编译  组件文件  node_modules/taro-ui/dist/weapp/components/calendar/controller/index.tsx
编译  组件文件  node_modules/taro-ui/dist/weapp/components/calendar/body/index.tsx
name: wx:key
code: item.$original.value
splitCode: [ 'item', '$original', 'value' ]
value splitCode: $original.value
生成  组件配置  dist/dist/taro-ui/dist/weapp/components/calendar/controller/index.json
生成  组件逻辑  dist/dist/taro-ui/dist/weapp/components/calendar/controller/index.js
生成  组件模板  dist/dist/taro-ui/dist/weapp/components/calendar/controller/index.wxml
编译  组件文件  node_modules/taro-ui/dist/weapp/components/calendar/ui/day-list/index.tsx
编译  组件文件  node_modules/taro-ui/dist/weapp/components/calendar/ui/date-list/index.tsx
name: wx:key
code: item.$original.text
splitCode: [ 'item', '$original', 'text' ]
value splitCode: $original.text
name: wx:key
code: key
splitCode: [ 'key' ]
value: key

[Garfield550]

最小化复现了，是 自定义组件上的 key 字段会生成 $original

// index.tsx

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import ListView from './list-view'

export default class Index extends Component {
  render () {
    const listData = [
      {
        name: 'list 1',
        value: [
          {
            value: 'list 1 value 1'
          },
          {
            value: 'list 1 value 2'
          },
        ]
      },
      {
        name: 'list 2',
        value: [
          {
            value: 'list 2 value 1'
          },
          {
            value: 'list 2 value 2'
          },
        ]
      },
    ]
    return (
      <View className='index'>
        <View>Test</View>
        {
          listData.map(list => (
            <ListView key={list.name} list={list.value}>{list.name}</ListView>
          ))
        }
      </View>
    )
  }
}

// list-view.tsx

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

export default class ListView extends Component<{ list: { value: string }[] }> {
  render() {
    const { list, children } = this.props
    return (
      <View>
        <View>{children}</View>
        {
          list.map(item => {
            <View key={item.value}>{`Value: ${item.value}`}</View>
          })
        }
      </View>
    )
  }
}

编译结果 index.wxml

<block wx:if="{{$taroCompReady}}">
    <view class="index">
        <view>Test</view>
        <list-view wx:key="$original.name" wx:for="{{loopArray4}}" wx:for-item="list" wx:for-index="_anonIdx2" compid="{{list.$compid__6}}">{{list.$original.name}}</list-view>
    </view>
</block>

list-view.wxml

<block wx:if="{{$taroCompReady}}">
    <view>
        <view>
            <slot></slot>
        </view>
        {{list.map(item => { <View wx:key={item.value}>{'Value: ' + item.value}</View>; })}}
    </view>
</block>

[zhangfu-git]

遇到相同的问题taro 1.3.35, 使用wxParse之前没有警告，现在都是警告如下图

[Garfield550]

@zhangfu-git

1. 微信开发者工具自某个版本后会提示 wx:key 不规范的警告，不影响实际使用。

2. wxParse Taro 是不会编译的，wx:key="" 本身已经存在于 wxParse 的 wxml 中，你可以自己搜索下。

[taro-bot[bot]]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

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

Good luck and happy coding~

[ldwonday]

升级taro满屏的这样子的警告，大概率是在自定义组件内部使用map会出现这样子的警告！比如下面的代码：

<AtFloatLayout isOpened={isOpened} title={popTitle} onClose={onClose}>
        <View className="selectList">
          {list.map(item => (
            <View className="listItem" key={item.id} onClick={() => onSelect(item)}>
              {item.name}
            </View>
          ))}
        </View>
      </AtFloatLayout>

[ldwonday]

已经修复了吗？

[Garfield550]

被机器人关闭了

[shenghanqin]

我这边升级微信开发者工具后出现，但我同事的相同版本的开发者工具上并没有提示。 只要新打开一个页面，就会多出十几个warning @Garfield550

[mylesshie]

升级开发者工具后出现同样警告

[liwanying]

升级开发者工具后出现同样警告，开发者工具版本v1.02.1911180 @Chen-jj

[shenghanqin]

@Chen-jj 我同事上周五不提示warning，今天也提示了。

[zhengpengtao]

@Chen-jj 同样的，升级开发者工具之后就出现了,看着很烦人。目前的版本号是：v1.02.1911180

[xxchevi]

遇到同样问题，一堆提醒很烦人，谁有解决方法吗？

[rover95]

开发工具关闭warning警告, 眼不见心不烦

[icewind7030]

请问这个问题有进展吗，一堆warning看着很膈应啊，直接把warning关了不是办法吧

[Garfield550]

1.3.31 修复

[lanxkk]

1.3.31 修复

更新到了 1.3.30 还存在这个问题，期待 1.3.31。

[Inori-Lover]

1.3.31 修复

更新到了 1.3.30 还存在这个问题，期待 1.3.31。

1.3.31依然。 我觉得这个可能要确定是开发者工具的问题还是taro的问题？

[Garfield550]

发现 1.3.30 已经有修复代码了 e6910db

https://github.com/NervJS/taro/blob/e6910db3d1b688a9bfba1c9dc66bb5ec5e066eea/packages/taro-transformer-wx/src/create-html-element.ts#L52-L56

[Inori-Lover]

发现 1.3.30 已经有修复代码了 e6910db

https://github.com/NervJS/taro/blob/e6910db3d1b688a9bfba1c9dc66bb5ec5e066eea/packages/taro-transformer-wx/src/create-html-element.ts#L52-L56

但问题still there

[pacoyang]

升级开发者工具后出现同样警告

[lanxkk]

更新到了 1.3.32，问题依然存在。

[Garfield550]

@lanxkk 删除掉 dist 文件夹，完整编译试一下

[lanxkk]

@lanxkk 删除掉 dist 文件夹，完整编译试一下

还是有这个问题。

[Inori-Lover]

@lanxkk 删除掉 dist 文件夹，完整编译试一下

上边提示的pull request合并到了2.x分支吧 应该没在1.3.32（changelog也没看到

[Garfield550]

抱歉我刚刚发现提交到了 2.x 分支。

[zhangcy1]

版本1.3.32还是会有这个问题，请问修复了吗？

[lanxkk]

1.3.33版已经修复了这个问题。

[shengbowen]

低版本的可以设置key的时候先用变量取到 id再赋值给key，可以避免这个问题

[SamChangi]

如果你用的是wxparse，可以试下全替换成wx:key="id"。:)

[Ding95]

低版本的可以设置key的时候先用变量取到 id再赋值给key，可以避免这个问题

这样烦人的警告的确没了