Question

基本上我有一个使用antd：https://ant.design/components/tabs/

的标签界面

现在，我所拥有的是每个标签加载相同的组件，但有条件地使用不同的道具，这很好。所以每个标签，当我点击它加载其各自的组件。

然后在每个组件上，我试图在卸载时进行重置。

我遇到的问题是，当我点击选项卡时，我更多地从左到右（如果我点击右边的选项卡），组件卸载正常。但是，如果我单击左侧的选项卡（从右向左移动），则不会触发卸载事件。

我认为插件本身可能存在问题，但后来我在网上做了一个小型演示，并且unmount在所有情况下都能正常工作。

所以我认为我的代码大部分都有问题，但我无法弄清楚它是什么。

我的标签代码如下所示：

<Tabs defaultActiveKey={this.state.activeTab} onChange={this.onTabChange.bind(this)}>
                    <TabPane tab="Total" key={TAB_TOTAL}>
                        {(currentKey === TAB_TOTAL) &&
                            <ViewCommonContainer
                                budget={this.state.budgetSeasonId}
                                version={this.state.versionId}
                                view='total'
                            />
                        }
                    </TabPane>
                    <TabPane tab="Women" key={TAB_WOMEN}>
                        {(currentKey === TAB_WOMEN) &&
                            <ViewCommonContainer
                                budget={this.state.budgetSeasonId}
                                version={this.state.versionId}
                                view='women'
                            />
                        }
                    </TabPane>
                    <TabPane tab="Men" key={TAB_MEN}>
                        {(currentKey === TAB_MEN) &&
                            <ViewCommonContainer
                                budget={this.state.budgetSeasonId}
                                version={this.state.versionId}
                                view='men'
                            />
                        }
                    </TabPane>
...

并且我有我的componentDidUnmount（）事件，在这种情况下只能正常工作：

总标签＆gt;女性或男性选项卡
女性标签＆gt;男人选项卡

我从左向右移动，但如果我尝试任何一个：

男士标签＆gt;女性或总标签
女性标签＆gt;总标签

然后卸载不会因某种原因发生。

我在线创建了一个示例，用于测试Antd Tabs实现是否导致此问题：https://codesandbox.io/s/k1wrm3v8v但在该示例中，卸载工作正常。

然后我认为与我的Redux逻辑相关的东西，但是我现在有点迷失了，试图弄清楚这个。

基本上是卸载im dipatching：

export const resetState = () => ({
   type: RESET_BUDGETS_VIEW,
});

然后我重置我的状态。但是这个调度行动发生在卸载上，正如我之前所说的那样，并不会一直发生。

另外，我拿了一个小屏幕分享来展示视觉发生的事情：https://media.giphy.com/media/xULW8MKZGRjhK2BoM8/giphy.gif质量不是很好，但你可以看到当我向左移动时，我在我的卸载方法中的控制台日志被调用，但是当我向左移动时，没有任何反应。

此外，一旦我登录页面就会发生这种情况，所以当我从右向左移动时它不起作用，因为组件已经存在。

很长的帖子，我知道。如果我需要进一步澄清这一点，请告诉我。

谢谢！

Answer 1

使用React功能组件时，我遇到了类似的问题。在每个选项卡中，我也有相同的组件，具有不同的道具。最终当我第一次单击这些选项卡时，我才不再懒惰地加载它们。这是通过在TabPane组件上的每个组件上使用forceRender = {true}道具来完成的。

从数据加载的角度来看，我理解这并不是最佳选择。

这是您从沙盒中将代码制成功能组件的过程。我用它来查看事物如何安装和卸载：

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import { Tabs } from "antd";
import "antd/dist/antd.css";
function TestComponent(props) {
  useEffect(() => {
    console.log("Mounting " + props.name);
    return () => {
      console.log("UNMounting " + props.name);
    };
  }, [props.name]);

  console.log("HOLA ", props.name);
  return (
    <div>
      <p>{props.name}</p>
    </div>
  );
}

const TabPane = Tabs.TabPane;

function Test(props) {
  const [activeTab, setActiveTab] = useState("1");
  console.log("Test was called. activeTab=" + activeTab);
  useEffect(() => {
    console.log(`Component 'Test' mounted.`);
    return () => console.log(`Compomnent 'Test' unmounting.`);
  }, []);
  return (
    <div style={{ margin: 24 }}>
      <Tabs defaultActiveKey={activeTab} onChange={(key) => setActiveTab(key)}>
        <TabPane tab="Tab 1" key="1">
          {activeTab === "1" && <TestComponent name="1" />}
        </TabPane>
        <TabPane tab="Tab 2" key="2">
          {activeTab === "2" && <TestComponent name="2" />}
        </TabPane>
        <TabPane tab="Tab 3" key="3">
          {activeTab === "3" && <TestComponent name="3" />}
        </TabPane>
      </Tabs>
    </div>
  );
}

ReactDOM.render(<Test />, document.getElementById("root"));

Answer 2

目前 Tabs 有一个属性 activeKey。这个属性处理这个。

选项卡界面，无法卸载组件

2 个答案: