温馨提示:本文翻译自stackoverflow.com,查看原文请点击:react native - Redux
react-native react-redux redux

react native - Redux

发布于 2020-04-08 11:53:31

mapStateToProps没有得到来自国家storeconsole.log的响应是:

Object {
  "selectStateClassify": Object {
    "newClassify": "É pra vir algo",
  },
}

并显示一条消息错误,说Can't find variable: stateClassify,我知道这是一个属性,但我不知道如何像使用对象一样使用此属性。我想stateClassify在标签中使用<Text>{stateClassify}</Text>

import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';

function Classificacao({ navigation }){

    return(
        <View style={{
            flex: 1,
            paddingTop: 30,
            flexDirection: 'column',
            alignItems: 'center',
        }}
        >
            <Text style={{
                textAlign: 'center',
                paddingHorizontal: 60,
                fontSize: 25,
            }}
            >Com base no Manual de Quadros do AIDPI, o paciente pode apresentar:</Text>

            <Text style={{
                textAlign: 'center',
                paddingHorizontal: 60,
                marginTop: 80,
                fontSize: 25,
                fontWeight: 'bold',

            }}
            >{stateClassify}</Text>
            <TouchableOpacity 
                style={styles.goButton}
                onPress={() => { navigation.navigate('Doencas'); }} 
            >

                <Text style={styles.textButton}>Resultado</Text>
            </TouchableOpacity>
        </View>        
    );

}

const styles = StyleSheet.create({...});

const mapStateToProps = state => {
    console.log(state);
    return{
    stateClassify: state.selectStateClassify.newClassify,
    }
};

export default connect(mapStateToProps)(Classificacao);

我发现的另一个问题是在reducer上,我不知道这是什么问题,但是reducer没有获得用于更改状态的操作参数,代码如下:

import { SHOW_CLASSIFY } from '../actions/type';

const initialState = {
    newClassify: 'É pra vir algo'
}

export const selectClassify = (state = initialState, action) => {
    switch(action.type){
        case SHOW_CLASSIFY:
            return{
                ...state,
                newClassify: action.newClassify
            };
        default:
            return state;
    }
}

动作代码:

import { SHOW_CLASSIFY } from './type';

export const showClassify = (classify) => ({
    type: SHOW_CLASSIFY,
    newClassify: classify
});

商店代码:

import { createStore } from 'redux';
import { Reducers } from '../reducers/index';

export const Store = createStore(Reducers);

App.js代码:

import React from 'react';
import { StatusBar } from 'react-native';
import { Provider } from 'react-redux';

import Routes from './src/routes';
import { Store } from './src/redux/store/store';

export default function App() {
  return (
    <>
    <Provider store={Store}>
      <StatusBar barStyle="light-content" backgroundColor="#f89747" />
      <Routes />
    </Provider>
    </>
  );
}

查看更多

提问者
Victor Lourenço
被浏览
25
Charlie 2020-02-04 00:27

将stateClassify添加到已分解的props中,以便可以像这样使用它,请记住,您正在将props映射到您的组件,但是当您在函数参数中分解props时,还需要添加它。

function Classificacao({ navigation,  stateClassify }){
 ...
}