javascript - 类型错误：未定义不是对象（评估“availableMeals.filter”）。我不知道为什么会收到此错误

Question

我正在使用 useSelector() 挂钩将状态作为道具传递，但我收到一条错误消息：

TypeError: undefined is not an object (evaluating 'availableMeals.filter')

/store/reducers/meals.js：

import { MEALS } from "../../Data/Dummy-Data";

const intialState = {
  meals: MEALS,
  filteredMeals: MEALS,
  FavouriteMeals: [],
};

const mealsReducer = (state = intialState, action) => {
  return action;
};

export default mealsReducer;

CategoryMealScreen.js：

import React from "react";
import { useSelector } from "react-redux";

import { CATEGORIES } from "../Data/Dummy-Data";
import MealListData from "../component/mealListData";

const CategoryMealScreen = (props) => {
  const catId = props.navigation.getParam("categoryId");
  const availableMeals = useSelector((state) => state.meals.filteredMeals);
  const DisplayedMeal = availableMeals.filter(
    (meal) => meal.categoryIds.indexOf(catId) >= 0
  );

  return (
    <MealListData listData={DisplayedMeal} navigation={props.navigation} />
  );
};
CategoryMealScreen.navigationOptions = (navigationData) => {
  const catId = navigationData.navigation.getParam("categoryId");
  const selectedCategory = CATEGORIES.find((cat) => cat.id === catId);
  return {
    headerTitle: selectedCategory.title,
  };
};

export default CategoryMealScreen;

我不知道为什么我会收到这个错误。

标签： javascriptreactjsreact-nativereact-reduxreact-hooks

Answer 1

问题出在你的减速机上，

const mealsReducer = (state = intialState, action) => {
  return action;
};

您正在返回一个 action 而不是 state 。请将此更改为

const mealsReducer = (state = intialState, action) => {
      return state;
    };