Skip to content
This repository has been archived by the owner on Mar 7, 2024. It is now read-only.

[BUG] 渲染列表中的序号没有正常更新 #1363

Closed
fenyiwudian opened this issue Nov 11, 2020 · 1 comment · Fixed by #1364
Closed

[BUG] 渲染列表中的序号没有正常更新 #1363

fenyiwudian opened this issue Nov 11, 2020 · 1 comment · Fixed by #1364
Labels
bug Something isn't working

Comments

@fenyiwudian
Copy link

fenyiwudian commented Nov 11, 2020

bug 描述
渲染一个可以排序的列表,每个列表相中渲染了该列表项的序号,更改排序号以后,某些列表项上的序号没有更新。
如某一项现在排在第二位,它渲染的序号为2,将它移动到第三位之后,它的序号应该为3,但是有时候仍然显示2.

大概的代码如下所示:

const initialList = [
  {
    text: '第一项',
  },
  {
    text: '第二项',
  },
  {
    text: '第三项',
  },
  {
    text: '第四项',
  },
  {
    text: '第五项',
  }
];
class SortList extends React.Component {
  state = {
    list: initialList,
  }
  resort(index, step) {
    const { list } = this.state;
    const targetIndex = index + step;
    if (targetIndex < 0 || targetIndex > list.length - 1) {
      return;
    }
    const newList = [...list];
    const swap = newList[targetIndex];
    newList[targetIndex] = newList[index];
    newList[index] = swap;
    this.setState({ list: newList });
  }
  render() {
    const { list } = this.state;
    return <View>
      <View>Remax Sort List:</View>
      {list.map((item, index) => {
        return <View key={item.text} style={{ display: 'flex', justifyContent: 'space-between' }}>
          <View>{index}</View>
          <View>{index + item.text}</View>
          {index > 0
            ? <View onTap={() => this.resort(index, -1)}>上移</View>
            : <View>N/A</View>}
          {index < list.length - 1
            ? <View onTap={() => this.resort(index, 1)}>下移</View>
            : <View>N/A</View>}
        </View>
      })}
    </View>
  }
}

目前大概试了一下:
这个现象仅用remax打包成微信小程序的时候可以出现,remax打包成淘宝小程序不会出现。

使用微信小程序原生开发同样内容也不会出现.

使用纯React进行web开发同样内容也不会出现。

如果将渲染列表是绑定的keykey={item.text}改成key={index + item.text}则在打包成微信小程序中也能正常更新。

复现步骤
参照上述代码,或使用该案例仓库,运行后打开首页可以测试效果。

期望结果
序号总是能正常更新

复现代码
案例仓库

版本信息:

  • remax 版本:2.7.7
  • 手机型号 全部
  • 小程序端 微信小程序
  • 小程序版本 2.14.0
  • 开发环境 mac OS

其他信息
异常情况:
remax
正常情况
react

@fenyiwudian fenyiwudian added the bug Something isn't working label Nov 11, 2020
@fenyiwudian fenyiwudian changed the title [BUG] [BUG] 渲染列表中的序号没有正常更新 Nov 11, 2020
@yesmeck
Copy link
Member

yesmeck commented Nov 12, 2020

2.8.7 已修复,感谢反馈。

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants