【问题标题】:React useSelector not working, what am I doing wrong?React useSelector 不起作用,我做错了什么?
【发布时间】:2021-02-04 00:00:09
【问题描述】:

我有一个包含 selector.js 文件的选择器文件夹

const isRecipeFavorited = state => recipeId => {
    const recipe = state.find(recipe => recipe.id === recipeId)
    console.log(`Selector isRecipeFavourtied: ${recipeId}`)
    return recipe ? recipe.is_fav : false
}

这是我的 favicon.js 文件,它调用了这个 useSelector。

import React, {useState, useEffect} from 'react'
import { FontAwesome } from '@expo/vector-icons'
import { View, TouchableOpacity,StyleSheet, Text, Alert } from 'react-native'
import {isRecipeFavorited} from '../selectors/selectors'
import {useSelector} from 'react-redux'
import { favids } from '../reducers/favids'

const FavIcon = ({recipeid, onToggle, isFavourite, text}) => {
 
  const isFavNew = useSelector(isRecipeFavorited(recipeid))

  return (
    <View>
      <TouchableOpacity style={styles.favItem} onPress={() => onToggle(recipeid)}>
        <FontAwesome name={isFavNew === true ? 'heart' : 'heart-o'} size={40} color='red' />
        <Text> {text}</Text>
      </TouchableOpacity>
    </View>
  )
}

export default FavIcon

我不断收到错误消息,说我的选择器不是函数。 _selectors.isRecipeFavourited 不是一个函数。 我正在尝试从状态中检索 recipe.is_fav 的值。 我也在这个项目中使用 Redux。

【问题讨论】:

    标签: reactjs react-native redux react-redux


    【解决方案1】:

    我认为您需要在选择器函数中反转 staterecipeId,即:

    const isRecipeFavorited = recipeId => state => {...}
    

    这是一个有效的useSelector

    const thing = useSelector(state => state.thing);
    

    在您的情况下,您正在使用另一种类型的参数调用函数,而该函数又应返回 useSelector 所期望的类型的函数。

    【讨论】:

    • 我已经厌倦了按照你的建议进行倒车,但仍然是同样的错误
    • @abe 我已经更改了 useSelector 以尝试找出导致问题的原因,显然 state.find 或者我将其更改为 state.map 会导致问题。尝试记录状态查看记录状态的输出。 {"favids":[{"recipeid":1234,"is_fav":true},{"recipeid":231432,"is_fav":true}]} 我不断收到错误 state.map & state.find is undefined。有什么想法吗?
    • 如果这是你的状态,那么它不是一个数组。看起来你想要 state.favids.find()。
    【解决方案2】:

    这可以通过深入到 favids 对象来解决。

    选择器功能修改如下。

        const recipe = state.favids.find(recipe => recipe.recipeid === recipeId)
        return recipe ? recipe.is_fav : false
    }```
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-06-13
      • 1970-01-01
      • 2013-05-16
      • 2017-02-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多