javascript - 使用 React swipeable views virtualize 来渲染组件会给它们带来抖动的双重加载动画

Question

对于我的应用程序主页，我使用 VirtualizeSwipeableViews 组件呈现多个组件。更改选项卡时，组件将动画到窗口中，然后很快重新加载。我感觉重新加载是由于 selectedTab 索引的状态更新了两次。如何解决此问题以获得组件之间的平滑过渡？

这是类似用例的演示：https ://codesandbox.io/s/00r0yr6vjn?file=/demo.js

我的代码：

const App = (props) => {
  
  const { match, history } = props;
  const { params } = match;
  const { page } = params;

  const tabNameToIndex = {
    0: "kaupapa",
    1: "artists",
    2: "tickets",
    4: "info",
    5: "participate",
    6: "gallery",
  };

  const indexToTabName = {
    kaupapa: 0,
    artists: 1,
    tickets: 2,
    info: 4,
    participate: 5,
    gallery: 6,
  };

  const [selectedTab, setSelectedTab] = useState(indexToTabName[page]);

  const handleChange = (event, newIndex) => {
    history.push(`/home/${tabNameToIndex[newIndex]}`);
    setSelectedTab(newIndex);
  };

  const slideRenderer = (params) => {
    const { index } = params;
    let component;

    switch (mod(index, 7)) {
      case 0:
        component = <Kaupapa />;
        break;
      case 1:
        component = <Artists />;
        break;
      case 2:
        component = <Tickets />;
        break;
      case 4:
        component = <Info />;
        break;
      case 5:
        component = <Participate />;
        break;
      case 6:
        component = <Gallery />;
        break;
      default:
        break;
    }
    return <>{component}</>;
  };

  const handleChangeIndex = (index) => {
    setSelectedTab(index);
  }

  return (
    <>
        <Tabs
          value={selectedTab}
          onChange={handleChange}
        >
          <Tab label="Kaupapa" />
          <Tab label="Artists" />
          <Tab label="Tickets" />
          <Tab
            icon={
              <img
                src={logo}
              ></img>
            }
            disabled
          />
          <Tab label="Info" />
          <Tab label="Participate" />
          <Tab label="Gallery" />
        </Tabs>

      <VirtualizeSwipeableViews
        index={selectedTab}
        onChangeIndex={handleChangeIndex}
        slideRenderer={slideRenderer}
      />
    </>
  );
};

export default App; ```