百度小程序安卓端列表数据渲染下一项会覆盖上一项

[AsherSun]

问题描述

• 百度小程序 - 安卓端
• 列表的数据下一项会覆盖上一项
• 复现图片：
  

复现步骤

1.复现代码：
测试页面

import Taro, { Component } from '@tarojs/taro';
import HomeList from '@/components/HomeList';
import { View } from '@tarojs/components';
export default class extends Component {
  public state = {
    collections: [
      {
        name: '影印美好时光',
        items: [
          {
            image: 'https://img01.songzhaopian.cn/eg/2019/07/26/8a869bcb-e858-4245-991b-17b89f607858.jpg',
            title: '5寸高清照片',
            subTitle: '用时光点缀生活',
            unitPrice: 80,
            productId: 101,
            unit: '张',
          },
        ],
      },
      {
        name: '定制美好生活',
        items: [
          {
            image: 'https://img01.songzhaopian.cn/eg/2019/07/26/1d8fa29a-af39-4fc0-906d-a62129545a96.jpg',
            title: 'DIY创意摇摇乐',
            subTitle: '超可爱的车载摇头摆件',
            unitPrice: 1490,
            productId: 415,
            unit: '个',
          },
        ],
      },
    ],
  };
  public render() {
    const { collections } = this.state;
    return (<View>
      Test 页面
      {collections.map(((item) => {
        return <HomeList listInfo={item} key={item.name} onClick={this.onProductClick}/>;
      }))}
    </View>);
  }
  private onProductClick = (briefInfo) => {
    // Taro.navigateTo({
    //   url: ``,
    // });
  }
}

list组件

import { ComponentClass } from 'react';
import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import HomeListItem from '../HomeListItem';
import PropTypes from 'prop-types';
import { ITouchEvent } from '@tarojs/components/types/common';
import { ProductContainer } from '../../store/home/interface';
import './index.scss';

interface PageOwnProps {
  listInfo: ProductContainer;
  onClick: (event: ITouchEvent) => any;
}

interface HomeList {
  props: PageOwnProps;
}

class HomeList extends Component {
  public static defaultProps = {
    onClick: () => void 0,
  };
  public static propTypes = {
    listInfo: PropTypes.object,
    onClick: PropTypes.func,
  };

  public render() {
    const { listInfo } = this.props;
    return (
      <View>
        {listInfo && (
          <View className='home-list'>
            <View className='title'>{listInfo.name}</View>
            <View className='list'>
              <View className='list-content'>
                {listInfo.items.map((item) => (
                  <View className='item' key={item.productId} onClick={this.props.onClick.bind(this, item)}>
                    <HomeListItem briefInfo={item} />
                  </View>
                ))}
              </View>
            </View>
          </View>
        )}
      </View>
    );
  }
}

export default HomeList as ComponentClass<PageOwnProps>;

listItem 组件

import { ComponentClass } from 'react';
import Taro, { Component } from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import PropTypes from 'prop-types';
import { ProductSimple } from '../../store/home/interface';
import { format } from '@/utils/tool';
import './index.scss';
import { fixUrlProtocol } from '@yg/extension';

interface PageOwnProps {
  briefInfo: ProductSimple;
}

interface HomeListItem {
  props: PageOwnProps;
}

class HomeListItem extends Component {
  public static propTypes = {
    briefInfo: PropTypes.object,
  };
  public static defaultProps = {
    briefInfo: {} as ProductSimple,
  };

  public render() {
    const { briefInfo } = this.props;
    return (
      <View className='home-list-item'>
        <View className='img-content'>
          {/* <View className='pd-img' style={`background-image: url(${briefInfo.image})`}></View> */}
          <Image className='pd-img' src={fixUrlProtocol(briefInfo.image)} mode='aspectFill' lazyLoad={true}></Image>
          {briefInfo.coupon && <View className='op-mask'>{briefInfo.coupon.text}</View>}
        </View>
        <View className='text-content'>
          <View className='pd-name'>{briefInfo.title}</View>
          <View className='pd-desc'>{briefInfo.subTitle}</View>
          <View className='pd-price'><Text className='price'>¥{format(briefInfo.unitPrice)}</Text>/{briefInfo.unit}</View>
        </View>
      </View>
    );
  }
}

export default HomeListItem as ComponentClass<PageOwnProps>;

2. 使用安卓手机预览
3. 会看到渲染异常的现象

期望行为

正常渲染

报错信息

系统信息

👽 Taro v1.3.13


  Taro CLI 1.3.13 environment info:
    System:
      OS: macOS 10.15.2
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
    npmPackages:
      @tarojs/async-await: 1.3.13 => 1.3.13
      @tarojs/components: 1.3.13 => 1.3.13
      @tarojs/plugin-babel: 1.3.13 => 1.3.13
      @tarojs/plugin-csso: 1.3.13 => 1.3.13
      @tarojs/plugin-less: ^1.3.13 => 1.3.17
      @tarojs/plugin-sass: 1.3.13 => 1.3.13
      @tarojs/plugin-uglifyjs: 1.3.13 => 1.3.13
      @tarojs/redux: 1.3.13 => 1.3.13
      @tarojs/redux-h5: 1.3.13 => 1.3.13
      @tarojs/router: 1.3.13 => 1.3.13
      @tarojs/taro: 1.3.13 => 1.3.13
      @tarojs/taro-alipay: 1.3.13 => 1.3.13
      @tarojs/taro-h5: 1.3.13 => 1.3.13
      @tarojs/taro-qq: 1.3.13 => 1.3.13
      @tarojs/taro-swan: 1.3.13 => 1.3.13
      @tarojs/taro-weapp: 1.3.13 => 1.3.13
      @tarojs/webpack-runner: 1.3.13 => 1.3.13
      eslint-config-taro: 1.3.13 => 1.3.13
      eslint-plugin-taro: 1.3.13 => 1.3.13
      nervjs: ^1.4.3 => 1.4.3

补充信息

• 使用百度小程序语法重述上面的步骤，一切正常
• IOS 手机没有这个问题‘
• 百度网盘，安卓和苹果手机一切正常
• 百度版本信息：11.18.0.12

如果您有功能上的建议，可以提到 FeatHub

使用上的问题，欢迎在「Taro 社区」一起交流

[taro-bot]

CC @Chen-jj

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[AsherSun]

猜测该bug和百度版本有关，低版本的手百没有出现这个问题

[thisTom]

我也在安卓设备上遇到了类似问题，列表页面使用子组件循环渲染时，在子组件中打印数据正常，render返回的界面不正常。如果不适用组件方式就正常。希望可以尽快排查一下这个严重BUG！！

[Chen-jj]

@AsherSun 调试了一下，Taro diff 后会按路径更新，应该是按路径 setData 时触发了百度小程序的 bug。建议换一种写法绕过，例如少开一层组件。或者用 Taro.setIsUsingDiff(false) 强制关闭 diff，但不太推荐。