jd-opensource / jd-opensource/taro-ui

【tt】3.0.0-alpha.3 AtTabs 不触发onClick

Open
#1,239 5 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.