undefined不是一個物件（評估'tabs.pop().name'）

我是本機反應的新手，我試圖從bottomtab導航器訪問背景關系，其中背景關系是在堆疊導航器stackCreate中創建的，并且選項卡導航器嵌套在stackCreate中，但是當我嘗試將新物件添加到背景關系時addTab 我得到：undefined is not an object (evaluating 'tabs.pop().name')，但是當我呼叫console.log(tabs.pop().name.replace("Step ", ""));它時，我很困惑為什么會這樣。

導航員；

const Stack = createStackNavigator();

const StackCreate = createStackNavigator();

const StepTabs = createBottomTabNavigator();

const StepStack = () => {

    return (
        <tabContext.Consumer>
        {({tabs}) => (
        <StepTabs.Navigator
        screenOptions={{
        tabBarHideOnKeyboard: true
        }}  
        >
            {
                tabs.map((tab) => <StepTabs.Screen key={tab.name} name={tab.name} stepTitle={tab.stepTitle} component={tab.component} 
                options={{
                    tabBarLabel: `${tab.stepTitle}`,
                }}
                /> )
            }
        </StepTabs.Navigator>
        )}
        </tabContext.Consumer>
    )
}

const CreateStack = () => {

    const [tabs, setTabs] = useState([
    {
        name: 'Step 1',
        component: CreateStep,
        stepTitle: 'Step 1',
    }
    ]);
    const [ingredientsList, setIngredientsList] = useState([]);

    
    return (
        <ingredientContext.Provider value={{ingredientsList, setIngredientsList}}>
        <tabContext.Provider value={{tabs, setTabs}}>
        <StackCreate.Navigator>   
        <StackCreate.Screen name="Create" component={Create}/>
        <StackCreate.Screen name="IngredientStep" component={IngredientStep}/>
        <StackCreate.Screen name="MyModal" component={ModalScreen} 
        screenOptions={{ presentation: 'modal' }}/>
        <StackCreate.Screen name="StepStack" component={StepStack}/>
        </StackCreate.Navigator>
        </tabContext.Provider>
        </ingredientContext.Provider>

    )
}

const RootStack =() => {

    return (
        <userContext.Consumer>
            {({UserId}) => (            
            <NavigationContainer>
                <Stack.Navigator
                    screenOptions={{
                        headerStyle: {
                            backgroundColor: "transparent",
                        },
                        headerShown: false,
                        headerTintColor: Colors.tertiary,
                        headerTransparent: true,
                        headerTitle: '',
                        headerLeftContainerStyle: {
                            paddingLeft: 20,
                        }
                    }}
                >
                    {UserId ? (
                    <Stack.Group>
                    <Stack.Screen name="Home" component={Home}/>
                    <Stack.Screen name="Recipes" component={Recipes} />
                    <Stack.Screen name="CreateStack" component={CreateStack} />
                    </Stack.Group>
                    ) : (
                    <Stack.Group>
                    <Stack.Screen name="Login" component={Login}/>
                    <Stack.Screen name="Register" component={Register}/>
                    </Stack.Group>
                    )}
                </Stack.Navigator> 
            </NavigationContainer>
            )
            }   
        </userContext.Consumer>
    );

}

export default RootStack;

創建步驟

const CreateStep = ({navigation, route}) => {  

    const {tabs, setTabs } = useContext(tabContext);


    const removeTab = (route) => {
        setTabs(tabs => tabs.filter(tab => {if(tab.stepTitle != route.stepTitle){if(parseInt(tab.stepTitle.replace("Step ", "")) > parseInt(route.stepTitle.replace("Step ", ""))){tab.stepTitle = 'Step '   (parseInt(tab.stepTitle.replace("Step ", "")) - 1);}     return tab;}}));
    }

    const addTab = () => {
        //console.log(tabs.pop().name.replace("Step ", ""));
        setTabs(tabs => [...tabs, 
            {
                name: 'Step '   (parseInt(tabs.pop().name.replace("Step ", ""))   1),
                component: CreateStep,
                stepTitle: 'Step '   (parseInt(tabs.pop().stepTitle.replace("Step ", ""))   1),
            }
        ])
    }

    const finishRecipe = () => {
        navigation.navigate("Recipes");
    }

    return (
        <StyledContainer>
            <InnerContainer>
                <StyledFormArea>    
                    <StyledTextInputLarge multiline={true} />
                </StyledFormArea>
                <View style={{
                    flex: 1,
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    height: 10,
                    width: '100%',
                }}>
                {(tabs.length < 10) ? (<Button title="Add Step" onPress={addTab}/>) : null}
                {(route.name != 'Step 1') ? (<Button title="Remove Step" onPress={() => removeTab(route)}/>) : null }
                <Button title="Finish Recipe" onPress={finishRecipe}/>
                </View>
            </InnerContainer>
        </StyledContainer> 
    )

}

export default CreateStep;

uj5u.com熱心網友回復：

首先，當您呼叫 時tabs.pop()，它會從tabs陣列中洗掉最后一個值并回傳該值。 我猜你打了兩次電話：
tabs.pop()

• 第一次打電話時，它作業正常，因為tabs不是 empty。
• 但是當你第二次呼叫時，此時tabs為空并tabs.pop()回傳undefined。當然，undefined.name犯一個錯誤。

例子：

const plants = ['broccoli'];
console.log(plants.pop());//"broccoli"
console.log(plants.pop());//undefined

您可以閱讀：array.pop()了解更多資訊。

我建議我可以在選項卡中為tab 之類的變數分配回傳值：

const tab = tabs.pop()

之后，我使用tab而不是tabs.pop()

標籤：反应式

上一篇：如何持久存盤傳入的資料？

下一篇：如果您從渲染回傳Component而不是<Component/>，則可能會發生這種情況