-
Notifications
You must be signed in to change notification settings - Fork 4.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
微信小程序, 列表数据中有 new ClassType() 的对象时, 并且向数组前面添加数据时, 该对象在列表中超大概率显示错乱 #4350
Comments
欢迎提交 Issue~ 如果你提交的是 bug 报告,请务必遵循 Issue 模板的规范,尽量用简洁的语言描述你的问题,最好能提供一个稳定简单的复现。🙏🙏🙏 如果你的信息提供过于模糊或不足,或者已经其他 issue 已经存在相关内容,你的 issue 有可能会被关闭。 Good luck and happy coding~ |
问题描述 复现步骤
index.tsx import { Button, Text, View } from '@tarojs/components';
import { inject, observer } from '@tarojs/mobx';
import Taro, { Component, Config } from '@tarojs/taro';
import { ComponentType } from 'react';
import { MyStore } from 'src/store/mystore';
import Test from './components/test';
import './index.less';
type PageStateProps = {
myStore: MyStore;
};
interface Index {
props: PageStateProps;
}
@inject('myStore')
@observer
class Index extends Component {
config: Config = {
navigationBarTitleText: '首页'
};
refresh = () => {
const { myStore } = this.props;
myStore.refresh();
};
loadmore = () => {
const { myStore } = this.props;
myStore.loadmore();
};
renderItem(data){
return <View>{data}</View>
}
render() {
const { myStore } = this.props;
const { messageKeys, status } = myStore;
return (
<View className="index">
<Button onClick={this.loadmore}>加载更多</Button>
{status == 'loading' && <View>loading</View>}
{messageKeys.map(msgKey => {
return (
<View key={msgKey}>
<Test data={msgKey} />
</View>
);
})}
<Button onClick={this.refresh}>刷新</Button>
</View>
);
}
}
export default Index as ComponentType; components/test.tsx import { View } from '@tarojs/components';
import Taro, { Component } from '@tarojs/taro';
import './index.less';
type CompProps = {
data: string
};
class Test extends Component<CompProps> {
render() {
const { data } = this.props;
return <View>{data}</View>;
}
}
export default Test; mystore.ts import { observable } from 'mobx';
type LoadingStatus = 'none' | 'loading' | 'success' | 'fail';
let temp_id = 0;
function getNextId() {
temp_id += 1;
return temp_id;
}
export class MyStore {
@observable status: LoadingStatus = 'none';
messageKeys: string[] = [];
async refresh() {
temp_id = 0;
this.status = 'loading';
const tempKeys: string[] = [];
for (let i = 0; i < 5; i++) {
const key = `id-${getNextId()}`;
tempKeys.push(key);
}
this.messageKeys = tempKeys;
this.status = 'success';
console.log('刷新成功', this.messageKeys);
}
async loadmore() {
this.status = 'loading';
const tempKeys: string[] = [];
for (let i = 0; i < 5; i++) {
const key = `id-${getNextId()}`;
tempKeys.push(key);
}
//将新的数据加入到列表前面, item的内容会乱掉
this.messageKeys = [...tempKeys, ...this.messageKeys];
this.status = 'success';
console.log('加载成功', this.messageKeys);
}
}
export const store = new MyStore();
export default store; 错误截图 系统信息
操作系统: [Windows 10] |
我这也有遇到... 希望能尽快修复,现在开发很难受 |
CC @Chen-jj |
@Chen-jj 两种方法都试过了, 并没有解决问题 |
问题应该出在这里, 生成compid 的 时候用了_anonIdx去得到一个新的compid, |
@deng-yc 关于第一点,应该和 #4059 是一样的,微信的循环渲染会影响到 data 中以 new 创建的对象。 下面打印的是点击“加载更多”时的 diff 后,真正 setData 的数据, 支付宝运行正常也证明这个猜想。 所以建议不要用 new,或者有空你可以写份原生微信小程序试一试。 |
@deng-yc 第二点,问题是出在 compid,但和你的猜想有点不同。这个下个版本修复。 |
关于第一个问题,我跟踪了diffArrToPath 和diffObjToPath, //前5个对象因为有from和to进行比较, 将得到 dataDiff
这个时候交给微信setData的, 所以我觉得在对比的时候,判断一下如果是new的对象,就不继续往下对比 |
@deng-yc 的确如此,感谢指出! |
nb! |
问题描述
小程序中, 列表数据中有 new ClassType() 的对象时, 并且向数组前面添加数据时, 该对象在列表中超大概率显示错乱
复现步骤
[复现问题的步骤]
mobx 模版
index.tsx
myStore.ts
期望行为
期望new的对象也能正确显示
报错信息
系统信息
补充信息
[可选]
[根据你的调查研究,出现这个问题的原因可能在哪里?]
The text was updated successfully, but these errors were encountered: