[英]Why does props.screenProps become undefined when redux state changes
我正在嘗試在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 }) }
/>
);
}
編輯:我的減速機
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);
}
case "CHANGE_DATA": {
state = {
...state,
data: action.payload
};
//console.log(action.payload);
}
}
return state;
};
您在代碼中缺少返回調用,因此您的case語句不state.data
,state.data在CHANGE_CURRENT_DATA
類型上變得不知所措。 在每種情況下,將減速器更新為返回state
:
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;
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.