Question

我正在react-native项目中实现redux。我有一些异步动作和一些纯动作。我无法在组件中获取状态值。我怎么得到的？？

class Gender extends Component {

    constructor(props) {
        super(props);

    }


    nextScr = (gend) => {
        alert(`gen: ${gend} \n this.props.gen: ${this.props.gen}`)
//***** here I am getting undefined ****
        if(gend!= null) {
            this.props.navigation.navigate('Info');
        }    
    }

    render() {
         const { gen } = this.props;                                                                                                                                                                                                                                                             
        return (
            <View style={style.container}>                                               

                <View style={style.bcont}>
                    {/*   this.storeData("Male") this.storeData("Female") */}
                    <Btn name="gender-male" txt="Male" click={() => this.props.saveMale('male')}
                        bstyl={(gen == 'Male')  ? [style.btn, style.btnsel] : style.btn} />
                    <Text style={style.hi}>OR</Text>
                    <Btn name="gender-female" txt="Female" click={() => this.props.saveFemale('female')}
                        bstyl={(gen == 'Female') ?  [style.btn, style.btnsel] : style.btn} />
                </View>
                <Text>Gender Value is: {this.props.gen}</Text>
    // **** here not getting gen value ****
                <Next name="chevron-right" nextClk={ () => this.nextScr(gen)} />
            </View>
        );
    }
}

const mapStateToProps = state => {
   const { gen } = state
     return {
        gen: gen,
     };
};

const mapDispatchToProps = dispatch => {
    return {
        saveMale: (gen) => {
            dispatch(saveMale(gen));
        },
        saveFemale: (gen) => {
            dispatch(saveFemale(gen));
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Gender);

这些是我的动作：

export const saveMale = (gen) => ({
            type: MALE_SAVE,
            payload: gen 
});

export const saveFemale = (gen) => ({
            type: FEMALE_SAVE,
            payload: gen
});

以下是我的减速器：

const initialState = {
    gen: null
}

export function genSave(state=initialState, action) {
    switch(action.type) {
        case MALE_SAVE:
                alert(`state in MALE_SAVE: ${action.payload}`);
            return { ...state, gen: action.payload };
        case FEMALE_SAVE: 
            alert(`state in FEMALE_SAVE: ${action.payload}`);
            return { ...state, gen: action.payload };
        default: 
            alert(`state in default gender save: ${JSON.stringify(state)}`);
            return state;
    };
}

我得到action.payload警报值，但是在组件中我没有得到值。我该如何解决这个问题？预先感谢。

Answer 1

你可以这样尝试吗？

...

nextScr(gend) {
        alert(`gen: ${gend} \n this.props.gen: ${this.props.gen}`)
        if(gend!= null) {
            this.props.navigation.navigate('Info');
        }    
    }

    render() {
         const { gen } = this.props;                                                                                                                                                                                                                                                             
        return (
            <View style={style.container}>                                               

                <View style={style.bcont}>
                    {/*   this.storeData("Male") this.storeData("Female") */}
                    <Btn name="gender-male" txt="Male" click={() => this.props.saveMale('male')}
                        bstyl={(gen == 'Male')  ? [style.btn, style.btnsel] : style.btn} />
                    <Text style={style.hi}>OR</Text>
                    <Btn name="gender-female" txt="Female" click={() => this.props.saveFemale('female')}
                        bstyl={(gen == 'Female') ?  [style.btn, style.btnsel] : style.btn} />
                </View>
                <Text>Gender Value is: {this.props.gen}</Text>
                <Next name="chevron-right" nextClk={ () => this.nextScr(this.props.gen)} />
            </View>
        );
    }

...

Answer 2

我相信您的mapStateToProps可能是问题所在，具体取决于您初始化商店的方式。现在，它假设Set<T> validItems = new HashSet<>(listB); listA.clear(); listB.forEach(item -> { if(validItems.contains(item)) { listA.add(item); } });是基础商店的属性，但是在创建添加另一个对象层的商店时，您可能会调用gen。

状态在react-native redux中未定义

2 个答案: