如何使用useState更新多重状态？

Question

我正在使用来自React-Native的TabView，作为其一部分，我将两个状态用于两个不同的对象，如下所示。

const [routes, setRoutes] = React.useState([]);
const [sceneMap, setSceneMap] = React.useState({});

每当TabView获得焦点时，我都会在useEffect挂钩中调用一个函数。同样在此挂钩本身内，我使用新值更改/重新分配了两个状态，如下所示

React.useEffect(() => {
        // Return the function to unsubscribe from the event so it gets removed on unmount
        return navigation.addListener('focus', async () => {
            const dynamicTabsResponse = await getTabsDynamically();
            let response;
            if (dynamicTabsResponse != null) {
                response = await getRoutes(dynamicTabsResponse);
                **setRoutes(response);**

                const scenes = await getScenes(dynamicTabsResponse)
                newSceneMap = await getSceneMap(response, scenes)

                **setSceneMap({...newSceneMap});**
            }
        });
    }, []);

这是我的返回函数：

if (routes.length > 0 && Object.keys(newSceneMap).length > 0) {
        return (
            <TabView
                navigationState={{index, routes}}
                renderScene={SceneMap(sceneMap)}
                onIndexChange={setIndex}
                initialLayout={initialLayout}
            />
        );
    } else {
      console.log( Object.keys(newSceneMap))
        console.log("routes length", routes.length)
        return null
    }

问题是，第一个状态更新后，UI的重新呈现正在发生，并且导致错误，因为我的UI也需要第二个状态的更新状态。我如何通知React-Native在两个状态都更新之前不要重新渲染？有没有办法做到这一点，或者我实施的方式有误？请建议

仅解释一下，请考虑以下输出：

当我重新启动应用程序时，Routes and Array的值如下：

1. routes length inside if 2

2. inside if Array [
  "NEWS",
  "CRIME",
]

[转到其他屏幕并选中复选框并进入Tabscreen时，输出如下：

1. routes length inside if 3

2. inside if Array [
  "NEWS",
  "CRIME",
]

正如我从第二个输出中看到的那样，Routes的状态已更新为3（这将导致重新渲染），而不是Array的状态。由于哪个TabView显示/抛出错误

Answer 1

“我如何通知React-Native在两个状态都更新之前不重新渲染？”

状态更改后，您将无法停止重新渲染。但是can要做的是直到准备好渲染时才更新状态。

如果将两个状态更新一起移动，以便它们同时更新，并且它们之间没有异步获取，则它应该像您期望的那样工作。

        if (dynamicTabsResponse != null) {
            response = await getRoutes(dynamicTabsResponse);

            const scenes = await getScenes(dynamicTabsResponse)
            newSceneMap = await getSceneMap(response, scenes)

            // Update both states together, after all awaits are done.
            setRoutes(response);
            setSceneMap({...newSceneMap});
        }

Answer 2

setIt({...routesAndsceneMap,routes:[...response],sceneMap:{...newSceneMap}})

有关工作，请参见此链接https://stackblitz.com/edit/react-p7jrjv?file=Hello.js