TypeError: TypeError: (0, _reactRedux.useSelector) 不是一个函数

Question

我正在使用 react-redux 中的 useSelector 在我的 React Native 应用程序中工作，我遇到了以下错误： TypeError: TypeError: (0, _reactRedux.useSelector) is not a function. 我的代码如下： import { useSelector } from 'react-redux'; const availableMeals = useSelector(state => state.meals.filteredMeals); 根据官方文档，这是使用 useSelector 的最简单方式，但我仍然遇到了这个错误。

之前，在我的项目中还出现另一个与 Redux 相关的错误，但它在一晚上自动解决了，所以这个问题是否与某些缓存有关？

我该如何解决这个问题？

这是我的代码：

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

import { CATEGORIES } from '../data/dummy-data';
import MealList from '../components/MealList';

function CategoryMealScreen(props) {
    const catId = props.navigation.getParam('categoryId');

    const availableMeals = useSelector(state => state.meals.filteredMeals);

    const displayedMeals = availableMeals.filter(meal => meal.categoryIds.indexOf(catId) >= 0);

    return <MealList listData={displayedMeals} navigation={props.navigation} />;
};

CategoryMealScreen.navigationOptions = navigationData => {
    //console.log(navigationData);
    const catId = navigationData.navigation.getParam('categoryId');
    const selectedCategory = CATEGORIES.find(cat => cat.id === catId);

    return {
        headerTitle: selectedCategory.name,
    };
};

export default CategoryMealScreen;

- Chetan S.

---

你能否将你的代码发布到CodePen或其他在线编辑器上？ - Maulik Sakhida

请确保您已安装 react-redux v7.1.0 或更高版本。 - Shubham Khatri

@ShubhamKhatri 我的 react-redux 版本是 7.1.3，但错误仍然存在。 - Chetan S.

@MaulikSakhida 请查看此链接：https://codepen.io/chetannik44/pen/LYYmLgR?editors=0010#0 - Chetan S.

你的路由 reducer 中是否定义了 meals key，像这样：const rootReducer = combineReducers({ meals: ... }); - SuleymanSah

我从错误的包（“redux-form”）导入了它，这导致出现相同的错误。 - Anas Einea

Answer 1

我在package.json文件中将react-redux版本从^5.1.1升级到^7.1.1，但这导致在运行

npm install

时出现上游依赖项错误。

我通过将react版本从16.8.0升级到16.8.3解决了此问题，并成功安装了两个依赖项，不再收到以下错误：

TypeError: TypeError: (0, _reactRedux.useSelector) is not a function

- Berk

---

React-Redux在v7.1.0版本中首次添加了Hooks，因此您应该更新React-Redux。 - JChen___

Answer 2

useSelector()钩子只接受函数作为输入，因此要解决您的问题，您需要创建一个处理逻辑的函数，然后在useSelector中调用它。以下是一个示例：

这是一个es6函数

    const getMeals(state) => {
return state.meals.filteredMeals;
}

然后将您的函数传递到useSelector中，就像这样：

const availableMeals = useSelector(getMeals(myState));

你可以将这个函数(getMeals)放在你当前的组件中，甚至可以将其放在你的 reducer 中。

- Blessing

---

state => state.meals.filteredMeals 已经是一个函数了。 - Tolokoban

@Tolokoban state.meals.filteredMeals 看起来像是存储在状态中的单个值。 - Blessing

Answer 3

我的问题是从React中导入useSelector...

import React, { useSelector } from 'react';

但实际上它是：

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

- Gustavo Hernán Crucianelli

Answer 4

如果您已验证 react >= 16.8.3 和 react-redux >= 7.1.1，请尝试以下解决方案。对我而言，解决方法是安装 metro 包版本 0.56.0。

通过 npm： npm install metro@0.56.0

通过 yarn： yarn add metro@0.56.0

- aminous

Answer 5

根据我的问题，使用以下命令清除Jest的缓存可以解决问题。

npm run jest --clearCache

- Hitesh Prajapati