map循环语法出错

[Elliott-Hu]

问题描述
通过map循环纯函数组件会报错

后面我将代码修改为以下写法后

又警告没有设置key

taroKey 和 key 我都尝试过，都是会出现告警的

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

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

export default class ModuleArticles extends PureComponent {
  state = {
    articles: [
      {"article_id":160,"title":"文章1","cover_url":"http://big-c.oss-cn-hangzhou.aliyuncs.com/cms/img/wlcns2ns15ebn0pfm3oz0xuegy7fja1c.jpg","publish_time":1565244882,"record_info":{"like_list":[],"read_num":1,"read_person_num":1,"forwarded_num":0,"forwarded_person_num":0,"like_num":0},"mini_app_id":"","post_content":"","status":2,"qrcode_url":"","publish_scope_project":"","activity_id":0,"activity_switch":false,"publish_scope":0},
      {"article_id":117,"title":"11113","cover_url":"http://big-c.oss-cn-hangzhou.aliyuncs.com/cms/img/3umy1xkq8rce9vw4c3ad52vjfpzq2tdw.jpg","publish_time":1564988357,"record_info":{"like_list":[{"user_id":757547,"user_name":"zane","avatar":""},{"user_id":823086,"user_name":"Sucker","avatar":""},{"user_id":823087,"user_name":"Sucker","avatar":""}],"read_num":35,"read_person_num":12,"forwarded_num":1,"forwarded_person_num":1,"like_num":3},"mini_app_id":"","post_content":"","status":2,"qrcode_url":"","publish_scope_project":"","activity_id":0,"activity_switch":false,"publish_scope":0},
      {"article_id":153,"title":"云客测试0724","cover_url":"http://big-c.oss-cn-hangzhou.aliyuncs.com/cms/img/1stndj3b7k4uyhvwf41xuaic4pvcd6eq.png","publish_time":1564988288,"record_info":{"like_list":[{"user_id":757529,"user_name":"黄坚源","avatar":""},{"user_id":757547,"user_name":"zane","avatar":""}],"read_num":31,"read_person_num":8,"forwarded_num":7,"forwarded_person_num":2,"like_num":2},"mini_app_id":"","post_content":"","status":2,"qrcode_url":"","publish_scope_project":"","activity_id":0,"activity_switch":false,"publish_scope":0}
    ]
  }
  renderArticle = (article = {}/**, index*/) => {
    return (
      <View taroKey={article.article_id}>
        <Image src={article.cover_url} mode='aspectFill' />
        <View>
          <View>{article.title}</View>
          <View>{article.publish_time}</View>
        </View>
      </View>
    )
  }

  render() {
    const { articles } = this.state

    return (
      <View className={styles.container}>
        <View className={styles['module-title']}>精选文章</View>
        <ScrollView 
          className={styles['articles-content']}
          scrollX
        >
          <View className={styles.articles}>
            { articles.map(item => this.renderArticle(item)) }
          </View>
        </ScrollView>
      </View>
    )
  }
}

期望行为
[这里请用简洁清晰的语言描述你期望的行为]

报错信息

[这里请贴上你的完整报错截图或文字]

系统信息
👽 Taro v1.3.4

Taro CLI 1.3.4 environment info:
System:
OS: macOS 10.14.1
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
Yarn: 1.16.0 - ~/.nvm/versions/node/v10.16.0/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
npmPackages:
@tarojs/async-await: 1.3.4 => 1.3.4
@tarojs/components: 1.3.4 => 1.3.4
@tarojs/plugin-babel: 1.3.4 => 1.3.4
@tarojs/plugin-csso: 1.3.4 => 1.3.4
@tarojs/plugin-sass: 1.3.4 => 1.3.4
@tarojs/plugin-uglifyjs: 1.3.4 => 1.3.4
@tarojs/redux: 1.3.4 => 1.3.4
@tarojs/redux-h5: 1.3.4 => 1.3.4
@tarojs/router: 1.3.4 => 1.3.4
@tarojs/taro: 1.3.4 => 1.3.4
@tarojs/taro-alipay: 1.3.4 => 1.3.4
@tarojs/taro-h5: 1.3.4 => 1.3.4
@tarojs/taro-swan: 1.3.4 => 1.3.4
@tarojs/taro-tt: 1.3.4 => 1.3.4
@tarojs/taro-weapp: 1.3.4 => 1.3.4
@tarojs/webpack-runner: 1.3.4 => 1.3.4
eslint-config-taro: 1.3.4 => 1.3.4
eslint-plugin-taro: 1.3.4 => 1.3.4
nerv-devtools: ^1.4.0 => 1.4.3
nervjs: ^1.4.0 => 1.4.3
react: ^16.8.6 => 16.8.6

补充信息
我觉得有可能是taro在转换语法的时候，将循环转换成了template，此时在小程序的语法来说，key应该写在 template 标签上，而在react的语法中，map是直接循环插入组件的，并没有那层wrapper，因此key被绑定在了template里面的最顶层，而不是直接绑定在template上。

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[yuche]

你用过用一个 block 包裹住来进行循环，renderArticle 是不会知道他是不是要放在一个循环里，所以像你这么做 key 是没有效果的。

[taro-bot]

Hello~

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

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

Good luck and happy coding~