为什么即使有键更改，组件也不会在状态更改时重新呈现？

Question

我有一个自定义选项卡组件，用于在具有所需格式的选项卡之间导航。其中一个选项卡的按钮也需要导航到这些其他选项卡（不是我的设计，我无法更改内容）。

粗略地说，这是一个如何使用导航器的示例：

const [selectedRoute, setSelectedRoute] = useState<string>("TabOne");
const [idle, setIdle] = useState<boolean>(true);

useEffect(() => {
  // Do stuff
}, [idle]);

useEffect(() => {
  // No stuff to do but needs to be declared so that it's handled
  // Logs show that this function is being called and the route is changing
}, [selectedRoute]);

return(
  <SideNavTabsNavigator
    // I have tried setting key={selectedRoute} and STILL no rerender
    selectedRoute={selectedRoute}     // Route name of the tab displayed
    selectRoute={setSelectedRoute}    // Callback that switches tabs (this one works)
    resetTimer={() => setIdle(false)} // Callback that resets an automatic logout timer (this one works)
    routeProps={{
      TabOne: {
        screen:
          <TabOne
            resetTimer={() => setIdle(false)} // Callback that resets an automatic logout timer (this one works because there is no need to rerender)
            selectRoute={setSelectedRoute} // Callback that switches tabs (does NOT work)
            // Have also tried:
            // selectRoute={() => setSelectedRoute}
            // selectRoute={() => setSelectedRoute("TabTwo")} 
            // selectRoute={(routeName: string) => setSelectedRoute(routeName)}
          />,
        icon: "refresh",
        iconLabel: "Tab One",
      },
      TabTwo: {
        screen:
          <TabTwo
            resetTimer={() => setSelectedRoute} // Callback that switches tabs (does NOT work)
            selectRoute={setSelectedRoute} // Callback that switches tabs (does NOT work)
          />,
        icon: "arrow-down-bold-box",
        iconLabel: "Tab Two",
      },
    }}
  />
);

我正在将回调传递给选项卡，以便在按下按钮时，所选路线将发生变化。回调会更改所选路由并调用useEffect，但组件不会重新渲染，因此不会更改选项卡。

以下是SideNavTabsNavigator 返回的大致内容及其结构：

<SideNavTabs>
  <SideNavTabs.Tab>
    <SideNavTabs.Icon />
    <TabComponent />
  </SideNavTabs.Tab>
</SideNavTabs>

从SideNavTabs 更改选项卡效果很好，但从routeProps 却不行，我已经尝试了很多东西，但我不确定为什么它现在不起作用。任何帮助或解释将不胜感激。

我正在考虑只是导航到一个全新的导航器组件，因为我无法弄清楚这一点，但是构建一个全新的实例似乎非常低效。

Answer 1

我意识到在某个地方，我首先错误地调用了该组件。我将它填充到 SideNav(props) 而不是 <SideNav props={props} /> 之类的地方