Javascript 为什么当redux状态改变时，props.screenProps会变得未定义

我试图在React Native中显示自定义抽屉组件中的按钮列表。按钮成功加载和渲染，但立即变为“未定义”，因此无法单击。当我点击按钮时，我得到的具体错误是“undefined不是一个对象（评估'props.screenProps.data.menu.items'）”。在点击按钮之前，应用程序运行良好，并且可以查看

我尝试使用一些JS只显示未定义的按钮，但是按钮没有显示，因为它们未定义。我的数据存储在redux中

我的定制抽屉：

const CustomDrawerComponent = (props) => (
    <Provider store={store}>
        <SafeAreaView style={{ flex: 1 }}>
        <View style={{height: 150, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center'}}>
            <Text style={{marginTop: 50}}> Header Image / Logo</Text>
        </View>    
            <ScrollView>
            { //props.screenProps shows my list of buttons correctly, but clicking on them gives
            //the error of "undefined is not an object"
            //after initially rendering, they switch immediately to undefined
            //as proved by:  '''(props.screenProps.data.menu.items == undefined) &&''' 
            //doesn't show any buttons in the drawer
                props.screenProps.data.menu.items.map((_data) => { return( SideButtonClick(_data) ) })  
                }
            </ScrollView>
        </SafeAreaView>
    </Provider>
)
const SideButtonClick = (data) => {
    return(
        <Button title={data.title} key={data.title} 
            onPress = {() => store.dispatch({
            type: "CHANGE_CURRENT_DATA",
            payload: data }) } 
          />
    );
}

---

您的代码中缺少返回调用，因此您的case语句已失效并且处于

状态。在
CHANGE\u CURRENT\u data
类型上，数据被改写。在每个案例结束时，更新减速器以返回
状态
：

export const reducer = (state = initialState, action) => {
    switch (action.type) {
        case "CHANGE_CURRENT_DATA": {
            state = {
                ...state,
                title: action.payload.title,
                link: action.payload.link,
                icon: action.payload.icon
            };
                console.log(action.payload);
            return state;
                }
        case "CHANGE_DATA": {
            state = {
                ...state,
                data: action.payload
            };
             //console.log(action.payload);
           return state;
        }
    }
    return state;
};

我很困惑，您正在将
screenProps
发送到
MyApp
，但正在尝试使用
props。screenProps
在
CustomDrawerComponent
中？？您是否缺少一些代码？您还可以
将任何组件连接到商店并获取所需的内容，而不是将其作为道具再次发送到其他组件。@paruchuri-p MyApp是CustomDrawerComponent，是的，我的示例中缺少代码，但一切正常。我尝试使用var customConnect=connect（MapStateTrops，mapDispatchToProps）（CustomDrawerComponent）将组件连接到存储；这很有效，但我似乎无法以这种方式访问customdrawercomponent中的商店。我编辑了我的问题以显示我在哪里使用MyApps。你能检查一下
props.screenProps.data.menu.items&&props.screenProps.data.menu.items.map（）
在我的经验中，深度嵌套的对象不会立即加载。@Claeusdev它加载并呈现良好。但是当我点击按钮时，props.screenProps.data.menu.items将变得未定义。如果我像你提到的那样使用条件渲染，按钮根本不会显示。因此，我认为按钮最初是渲染的，当我的redux状态在别处发生变化时，props.screenProps.data不知何故变得未定义，这使得按钮也未定义
export const reducer = (state = initialState, action) => {
    switch (action.type) {
        case "CHANGE_CURRENT_DATA": {
            state = {
                ...state,
                title: action.payload.title,
                link: action.payload.link,
                icon: action.payload.icon
            };
                console.log(action.payload);
            return state;
                }
        case "CHANGE_DATA": {
            state = {
                ...state,
                data: action.payload
            };
             //console.log(action.payload);
           return state;
        }
    }
    return state;
};