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

linkingstar commented 3 years ago

问题描述

Taro v3.0.15 taro-ui v3.0.0-alpha.3 平台 tt

飞书小程序，使用AtTabs，如果改变了tabList中title的值，会导致AtTabs的onClick不被调用

复现步骤

使用AtTabs，并设置tabList的初始值
修改tabList中的title值
点击被修改的tab，不触发onClick

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 (
    <View>
      <Button onClick={changeTabTitle}>change tab1</Button>
      <AtTabs current={current} tabList={tabList} onClick={onClickTab}>
        {tabList.map((tab, index) => (
          <AtTabsPane key={tab.key} current={current} index={index}>
            <View
              style={{
                width: '100vw',
                height: '100vh',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }}
            >{`content${index}`}</View>
          </AtTabsPane>
        ))}
      </AtTabs>
    </View>
  );
}

期望行为 tab的title变跟之后，仍然能触发onClick

报错信息

系统信息

补充信息 经过查看taro-ui源代码，问题应该出在用item.title作为key。建议单独提供key属性，由外部传入

//taro-ui AtTabs的关键代码如下
 const tabItems = tabList.map((item, idx) => {
      const itemCls = classNames({
        'at-tabs__item': true,
        'at-tabs__item--active': current === idx
      })

      return (
        <View
          className={itemCls}
          id={`tab${idx}`}
          key={item.title}
          onClick={this.handleClick.bind(this, idx)}
        >
          {item.title}
          <View className='at-tabs__item-underline'></View>
        </View>
      )

taro-ui-bot[bot] commented 3 years ago

欢迎提交 Issue~

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

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

Good luck and happy coding~

LunarEdeg commented 3 years ago

问题描述

Taro v3.0.15 taro-ui v3.0.0-alpha.3 平台 tt

飞书小程序，使用AtTabs，如果改变了tabList中title的值，会导致AtTabs的onClick不被调用

复现步骤

使用AtTabs，并设置tabList的初始值
修改tabList中的title值
点击被修改的tab，不触发onClick

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 (
    <View>
      <Button onClick={changeTabTitle}>change tab1</Button>
      <AtTabs current={current} tabList={tabList} onClick={onClickTab}>
        {tabList.map((tab, index) => (
          <AtTabsPane key={tab.key} current={current} index={index}>
            <View
              style={{
                width: '100vw',
                height: '100vh',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }}
            >{`content${index}`}</View>
          </AtTabsPane>
        ))}
      </AtTabs>
    </View>
  );
}

期望行为 tab的title变跟之后，仍然能触发onClick

报错信息

系统信息

补充信息 经过查看taro-ui源代码，问题应该出在用item.title作为key。建议单独提供key属性，由外部传入

//taro-ui AtTabs的关键代码如下
 const tabItems = tabList.map((item, idx) => {
      const itemCls = classNames({
        'at-tabs__item': true,
        'at-tabs__item--active': current === idx
      })

      return (
        <View
          className={itemCls}
          id={`tab${idx}`}
          key={item.title}
          onClick={this.handleClick.bind(this, idx)}
        >
          {item.title}
          <View className='at-tabs__item-underline'></View>
        </View>
      )

请问，怎么单独提供key呢

7zf001 commented 3 years ago

看起来并不是key的问题吧？

lemondreamtobe commented 3 years ago

我也是这个问题。我之前先有一个tablist=[{title: '我的', key="mine"}] 改成了tablist=[{xxx}, {xxx}, {xxxx}, {title: '我的', key="mine"}] 第一个tab无法点击

nicainev commented 2 years ago

问题描述 Taro v3.0.15 taro-ui v3.0.0-alpha.3 平台 tt 飞书小程序，使用AtTabs，如果改变了tabList中title的值，会导致AtTabs的onClick不被调用 复现步骤

使用AtTabs，并设置tabList的初始值
修改tabList中的title值
点击被修改的tab，不触发onClick

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 (
    <View>
      <Button onClick={changeTabTitle}>change tab1</Button>
      <AtTabs current={current} tabList={tabList} onClick={onClickTab}>
        {tabList.map((tab, index) => (
          <AtTabsPane key={tab.key} current={current} index={index}>
            <View
              style={{
                width: '100vw',
                height: '100vh',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }}
            >{`content${index}`}</View>
          </AtTabsPane>
        ))}
      </AtTabs>
    </View>
  );
}

期望行为 tab的title变跟之后，仍然能触发onClick 报错信息 系统信息 补充信息 经过查看taro-ui源代码，问题应该出在用item.title作为key。建议单独提供key属性，由外部传入

//taro-ui AtTabs的关键代码如下
 const tabItems = tabList.map((item, idx) => {
      const itemCls = classNames({
        'at-tabs__item': true,
        'at-tabs__item--active': current === idx
      })

      return (
        <View
          className={itemCls}
          id={`tab${idx}`}
          key={item.title}
          onClick={this.handleClick.bind(this, idx)}
        >
          {item.title}
          <View className='at-tabs__item-underline'></View>
        </View>
      )

请问，怎么单独提供key呢

亲测， id={tab${idx}} 不用下标，用传入的id做标识 id={tab${item.id}} 可以解决问题

NervJS / taro-ui

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