jd-opensource / jd-opensource/taro-ui
【tt】3.0.0-alpha.3 AtTabs 不触发onClick
- Dominant language
- TypeScript
- Stars
- 4.7k
- Forks
- 740
- PR merge metrics
- No merged PRs in 30d
Description
**问题描述**
Taro v3.0.15
taro-ui v3.0.0-alpha.3
平台 tt
飞书小程序,使用AtTabs,如果改变了tabList中title的值,会导致AtTabs的onClick不被调用
**复现步骤**
1. 使用AtTabs,并设置tabList的初始值
2. 修改tabList中的title值
3. 点击被修改的tab,不触发onClick
```js
import { Button, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { useCallback, useState } from 'react';
import { AtTabs, AtTabsPane } from 'taro-ui';
const initTabs = [
{ title: 'tab1', key: '1' },
{ title: 'tab2', key: '2' },
{ title: 'tab3', key: '3' }
];
export default function TestAtTabs() {
const [current, setCurrent] = useState(0);
const [tabList, setTabList] = useState(initTabs);
const onClickTab = useCallback((index: number) => {
console.log('==index===', index);
setCurrent(index);
}, []);
const changeTabTitle = useCallback(() => {
const list = [...tabList];
list[0].title = 'new tab1';
setTabList(list);
Taro.showToast({ title: 'tab1已变更,此时点击第一个tab将无响应' });
}, [tabList]);
return (
change tab1
{tabList.map((tab, index) => (
{`content${index}`}
))}
);
}
```
**期望行为**
tab的title变跟之后,仍然能触发onClick
**报错信息**
**系统信息**
**补充信息**
经过查看taro-ui源代码,问题应该出在用`item.title`作为`key`。建议单独提供key属性,由外部传入
```jsx
//taro-ui AtTabs的关键代码如下
const tabItems = tabList.map((item, idx) => {
const itemCls = classNames({
'at-tabs__item': true,
'at-tabs__item--active': current === idx
})
return (
{item.title}
)
```
Contributor guide
Assessment
This issue has not been assessed yet.