antd 选项卡的 defaultActiveKey 属性在 Array.map 中不起作用答案

【问题标题】：defaultActiveKey prop of antd tabs not working in Array.mapantd 选项卡的 defaultActiveKey 属性在 Array.map 中不起作用
【发布时间】：2021-05-30 21:25:01
【问题描述】：

我正在尝试为 antd 选项卡 设置defaultActiveKey。我试过这样：

import React, {useState, useEffect} from "react";
import { Row, Tabs } from "antd";

const { TabPane } = Tabs;

const MyComponent = (props) => {

  const [tabs, setTabs] = useState([]);
  const defaultTab = 'tab2';

  useEffect(() => {
    const tabsData = [
      { name: "Tab 1", key: "tab1" },
      { name: "Tab 2", key: "tab2" },
      { name: "Tab 3", key: "tab3" }
    ];
    setTabs(tabsData);
  }, []);

  return (
    <React.Fragment>
      <Row>
        <Tabs defaultActiveKey={defaultTab}>
         
          {
            tabs.map(({name, key}) => (
              <TabPane tab={name} key={key}>
                Content of {name}
              </TabPane>
            ))
          }
        </Tabs>
      </Row>
    </React.Fragment>
  );
};

我想将 tab2 设置为 defaultActiveKey，但它不起作用。但是当我这样做时它正在工作：

<Tabs defaultActiveKey={defaultTab}>
  <TabPane tab={tabs[0].name} key={tabs[0].key}>
    <SomeComponent/>
  </TabPane>
  <TabPane tab={tabs[1].name} key={tabs[1].key}>
    <SomeComponent/>
  </TabPane>
  <TabPane tab={tabs[2].name} key={tabs[2].key}>
    <SomeComponent/>
  </TabPane>
</Tabs>

如何解决？

【问题讨论】：

谢谢@Ajeet Shah 现在我用我的场景更新了这个问题。抱歉，我之前无法正确地提出问题。请看下面我的回答
如果tabsData 是一个常数，你不需要保持它的状态。您可以在组件定义之外定义常量，甚至可以在单独的文件中定义常量并从那里导入。然后你甚至不需要做它的.length>0 检查。
就我而言，这不是一个常数。实际上标签数据是动态数据。 @Ajeet Shah

标签： reactjs antd ant-design-pro

【解决方案1】：

在 return 语句中检查 tabs 的长度

 return (
    <React.Fragment>
      {tabs.length > 0 && (
        <Tabs defaultActiveKey={defaultTab}>
          {tabs.map(({ name, key }) => (
            <TabPane tab={name} key={key}>
              Content of {name}
            </TabPane>
          ))}
        </Tabs>
      )}
    </React.Fragment>
)

【讨论】：