使用mapStateToProps时道具未定义

问题描述

在我的应用中,我像这样使用mapStatetoPros

const mapStatetoProps = (state:any) => {

   return {
    cardsAndBalance: state.cardsAndBalanceReducer
   }
}

在调试中,当我停在return时,可以看到我有一些数据处于状态。

当我在useEffect函数中停止应用程序并检查props时,props的值为undefined

useEffect(() => {

    console.log('useEffect')
    
    let cardNumbers: number[] = []
    const myCards = props.cardsAndBalance.cards;

    if(myCards)
        myCards.forEach((card: Card) => cardNumbers.push(card.number))

    generatePaymentCodeForTavim(cardNumbers = [])
        .then((res:any) => {
            setBarCode(res.barCode);
        })
        .catch( (err:any) => {
            console.log("error: " + err)
            ToastAndroid.show("Error Occurrd - check logs",ToastAndroid.SHORT);
        })
},[])

这是我将组件连接到商店的方式:

export default connect(mapStatetoProps)(PayWithTavimstep1);

这是整个组件:

    const PayWithTavimstep1 = ({navigation}:{navigation:any},props: any) => {
    
        const [barCode,setBarCode] = useState('')
    
        useEffect(() => {
    
            console.log('useEffect')
             //.......
        },[])
    
        return (
            
            <View style={styles.container}>
               // Some views
            </View>
        )
    }
export default connect(mapStatetoProps)(PayWithTavimstep1

当我在useEffect中停止执行时,为什么道具没有定义?

解决方法

问题是我将两个参数传递给了组件,例如:({navigation}:{navigation:any},props: any)。应该是(props: any),现在在我的道具中,我仍然可以访问导航。