undefined 不是 React Native 中的对象(评估 'course.id')

Question

我不知道为什么会出现这个错误，因为一切看起来都很好。我已经检查了减速器，动作也很好，但所有代码都很好。此外，我有一个过滤操作，它运行良好，但最喜欢的功能不起作用。当我试图添加到最喜欢的任何课程，然后错误弹出说"；undefined不是对象(正在评估'course.id'("；。

CourseOverview.js:

import React, { useEffect, useCallback } from "react";
import { ScrollView, View, Text, Image, StyleSheet } from "react-native";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import { useSelector, useDispatch } from "react-redux";
import CustomHeaderButton from "../component/CustomHeaderButton";
import ListItemData from "../component/ListItemData";
import { toggleFavourite } from "../store/actions/course";
const CourseOverview = (props) => {
const courseId = props.navigation.getParam("courseId");
const isCourseFav = useSelector((state) => state.course.FavouriteCourse).some(
(course) => course.id === courseId
);
const availableCourse = useSelector((state) => state.course.course);
const selectedCourse = availableCourse.find(
(course) => course.id === courseId
);
const dispatch = useDispatch();
const toggleFavouriteHandler = useCallback(() => {
dispatch(toggleFavourite(courseId));
}, [dispatch, courseId]);
useEffect(() => {
props.navigation.setParams({ toggleFav: toggleFavouriteHandler });
}, [toggleFavouriteHandler]);
useEffect(() => {
props.navigation.setParams({ isFav: isCourseFav });
}, [isCourseFav]);
return (
<ScrollView>
<Image source={{ uri: selectedCourse.imageUrl }} style={styles.image} />
<View style={styles.detail}>
<Text>{selectedCourse.rating}</Text>
<Text>{selectedCourse.complexity}</Text>
<Text>{selectedCourse.price}</Text>
</View>
</ScrollView>
);
};
CourseOverview.navigationOptions = (navigationData) => {
const courseTitle = navigationData.navigation.getParam("couseTitle");
const toggleFavourite = navigationData.navigation.getParam("toggleFav");
const isFavouriteMeal = navigationData.navigation.getParam("isFav");
return {
headerTitle: courseTitle,
headerRight: () => (
<HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
<Item
title="Fav"
iconName={isFavouriteMeal ? "ios-star" : "ios-star-outline"}
onPress={toggleFavourite}
/>
</HeaderButtons>
),
};
};
const styles = StyleSheet.create({
image: {
width: "100%",
height: 200,
},
detail: {
flexDirection: "row",
padding: 15,
justifyContent: "space-around",
},
title: {
fontFamily: "open-sans-bold",
fontSize: 22,
textAlign: "center",
},
});
export default CourseOverview;

从上面的文件中，我得到了错误。

/动作/课程.js:

export const SET_FILTERS = "SET_FILTERS";
export const TOGGLE_FAVOURITE = "TOGGLE_FAVOURITE";
export const toggleFavourite = (id) => {
return { type: TOGGLE_FAVOURITE, CourseId: id };
};
export const setFilters = (filterSettings) => {
return { type: SET_FILTERS, filters: filterSettings };
};

以上是操作文件。

/减速器/课程.js:

import { COURSE } from "../../Data/Dummy";
import { SET_FILTERS, TOGGLE_FAVOURITE } from "../actions/course.js";
import CourseOverview from "../../Screens/CourseOverview";
const intialState = {
course: COURSE,
filteredCourse: COURSE,
FavouriteCourse: [],
};
const courseReducer = (state = intialState, action) => {
switch (action.type) {
case TOGGLE_FAVOURITE:
const existingIndex = state.FavouriteCourse.findIndex(
(course) => course.id === action.courseId
);
if (existingIndex >= 0) {
const updatedFavCourse = [...state.FavouriteCourse];
updatedFavCourse.splice(existingIndex, 1);
return { ...state, FavouriteCourse: updatedFavCourse };
} else {
const course = state.course.find(
(course) => course.id === action.courseId
);
return {
...state,
FavouriteCourse: state.FavouriteCourse.concat(course),
};
}
case SET_FILTERS:
const appliedFilters = action.filters;
const updatedFilteredCourse = state.course.filter((course) => {
if (appliedFilters.Coursera && !course.Coursera) {
return false;
}
if (appliedFilters.Udemy && !course.Udemy) {
return false;
}
if (appliedFilters.Edx && !course.Edx) {
return false;
}
if (appliedFilters.Udacity && !course.Udacity) {
return false;
}
if (appliedFilters.Edureka && !course.Edureka) {
return false;
}
if (appliedFilters.FutureLearn && !course.FutureLearn) {
return false;
}
if (appliedFilters.Business && !course.Business) {
return false;
}
if (appliedFilters.DataScience && !course.DataScience) {
return false;
}
if (appliedFilters.Design && !course.Design) {
return false;
}
if (appliedFilters.Finance && !course.Finance) {
return false;
}
return true;
});
return { ...state, filteredCourse: updatedFilteredCourse };
default:
return state;
}
};
export default courseReducer;

在此减速器中，Filter工作正常，但Favourite不工作。

此外，下面是ListItemData.js，它将呈现喜爱的课程。

ListItemData.js:

import React from "react";
import { View, Text, FlatList, StyleSheet, ScrollView } from "react-native";
import CourseItem from "../component/CourseItem";
const ListItemData = (props) => {
const renderCourseItem = (itemData) => {
return (
<CourseItem
title={itemData.item.title}
onSelectMeal={() => {
props.navigation.navigate({
routeName: "CourseOverview",
params: {
courseId: itemData.item.id,
courseTitle: itemData.item.title,
},
});
}}
image={itemData.item.imageUrl}
rating={itemData.item.rating}
complexity={itemData.item.complexity}
price={itemData.item.price}
/>
);
};
return (
<View style={styles.List}>
<FlatList
data={props.listData}
keyExtractor={(item) => item.id}
renderItem={renderCourseItem}
style={styles.card}
/>
</View>
);
};
const styles = StyleSheet.create({
List: {
flex: 1,
width: "100%",
},
card: {
width: "100%",
},
});
export default ListItemData;

我不知道我做错了什么。

Answer 1

在../action/course.js中，您将键定义为CourseId(大写(，但在../reducer/course.js中，您使用action.courseId(小写(访问值。

将密钥更改为courseId或将操作更改为action。CourseId