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在两个状态都更新之前不要重新渲染？有没有办法做到这一点，或者我实施的方式有误？请建议

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

当我重新启动应用程序时，“路由和数组”的值如下：

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显示/引发错误

错误：

Check the render method of `SceneComponent`., 
    in SceneComponent (created by SceneView)
    in RCTView (created by SceneView)
    in SceneView (created by Pager)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (created by PanGestureHandler)
    in PanGestureHandler (created by Pager)
    in Pager (created by TabView)
    in RCTView (created by TabView)
    in TabView (at NewsScreen.js:73)
    in NewsScreen (at SceneView.tsx:98)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:89)
    in EnsureSingleNavigator (at SceneView.tsx:88)
    in SceneView (at useDescriptors.tsx:125)
    in RCTView (at BottomTabView.tsx:38)
    in SceneContent (at BottomTabView.tsx:122)
    in RCTView (at ResourceSavingScene.tsx:44)
    in RCTView (at ResourceSavingScene.tsx:27)
    in ResourceSavingScene (at BottomTabView.tsx:117)
    in RCTView (at screens.native.js:132)
    in ScreenContainer (at BottomTabView.tsx:101)
    in RCTView (at BottomTabView.tsx:100)
    in SafeAreaProviderCompat (at BottomTabView.tsx:99)
    in BottomTabView (at createBottomTabNavigator.tsx:41)
    in BottomTabNavigator (at BottomTabNavigator.js:22)
    in BottomTabNavigator (at SceneView.tsx:98)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:89)
    in EnsureSingleNavigator (at SceneView.tsx:88)
    in SceneView (at useDescriptors.tsx:125)
    in RCTView (at CardContainer.tsx:190)
    in RCTView (at CardContainer.tsx:189)
    in RCTView (at Card.tsx:526)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at Card.tsx:508)
    in PanGestureHandler (at Card.tsx:501)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at Card.tsx:497)

Answer 1

const Hello = () => {
 let response = [{one:"two"}]
 let newSceneMap = {
    name:"sdfvsdf"
 }
 const [routesAndsceneMap, setIt] = React.useState({
 routes:[{one:"three"}],
 sceneMap:{
   name:"sdfvds"
 }
});
const changeit = () => {
        setIt({...routesAndsceneMap,routes:[...response],sceneMap:  {...newSceneMap}})
 }
return (
<div>
  <h1>Hello {routesAndsceneMap.routes[0].one} {routesAndsceneMap.sceneMap.name}!</h1>
  <button onClick={changeit}>Click</button>
</div>
)};

您可以在此处查看其工作方式。有关工作，请参见此链接https://stackblitz.com/edit/react-p7jrjv?file=Hello.js

您添加了两个不同的useState，而是尝试像我一样将其组合为一个，并在按钮上的一个set函数中将其一起更改，只需单击它即可同时更改两个属性

Answer 2

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

状态更改后，您将无法停止重新渲染。但是您所能做的就是在准备渲染之前不更新状态。

如果将两个状态更新一起移动，以使它们同时更新，并且它们之间没有异步获取，则它应该可以按预期运行。

        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});
        }

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

2 个答案: