undefined 不是反应原生的对象（评估'course.id'）

Question

我不知道为什么会收到此错误，因为一切看起来都很好。我已经检查了减速器，也有动作，但那里的所有代码都很好。另外，我有一个可以正常工作的过滤器操作，但最喜欢的功能不起作用。当我尝试将任何课程添加到收藏夹时，弹出错误消息“未定义不是对象（正在评估'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;

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

../action/course.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 };
};

上面是动作文件。

../reducer/course.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;

在这个 reducer 中，过滤器工作正常，但收藏夹不工作。

另外，下面是 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