0

eu comecei a estudar React Native na versão 0.55.4, e parece que mudou umas coisas na versão mais atual (0.59.8), agora estou com dificuldade de passar/atribui valores no this.props.modificaNome, segue um exemplo abaixo de como eu faço em um TextInput e o erro que apresenta:

Dependências utilizadas:

"dependencies": {
    "firebase": "^5.7.3",
    "react": "16.8.3",
    "react-native": "0.59.8",
    "react-native-router-flux": "^4.0.6",
    "react-redux": "^7.0.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },

Eu não sei se essa mudança foi no React Native ou Redux. Mas tá apresentando o seguinte erro:

inserir a descrição da imagem aqui

Exemplo do meu código:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
	View,
	StyleSheet,
	StatusBar,
	Text,
	TouchableHighlight,
	TextInput
} from 'react-native';
import {
	modificaNome
} from '../reducers/AutenticacaoReducers';


class Confirmar extends Component {

	constructor(props) {
		super(props);
		this.state = {};
	}

	render() {
			return (
				<View style={{ flex: 1, backgroundColor: '#FFF' }}>
					<StatusBar backgroundColor="#104E8B" barStyle="light-content" />
					<View>

						<TextInput
							placeholder=" Digite o seu nome... "
							style={{ fontSize: 15, height: 50 }}
							selectionColor="#696969"
							underlineColorAndroid="#FFFFFF"
							returnKeyType="go"
							multiline={false}
							numberOfLines={1}
							spellCheck={false}
							maxLength={15}
							autoCorrect={false}
							value={this.props.nome}
							onChangeText={texto => this.props.modificaNome(texto)}
						/>

						<TouchableHighlight
							style={Estilos.buttom}
							underlayColor='#CDC9C9'
							accessibilityLabel="Clique aqui para ler o meu convite."
							onPress={() => {}}>
							<Text style={{ color: '#FFF', fontSize: 18, fontWeight: 'bold' }}>OK</Text>
						</TouchableHighlight>

					</View>
				</View>
			)
	}
}


const Estilos = StyleSheet.create({
	buttom: {
		alignItems: 'center',
		justifyContent: 'center',
		borderColor: '#3A5FCD',
		backgroundColor: '#04B45F',
		borderWidth: 0.5,
		borderRadius: 100,
		width: 280,
		height: 40
	},
})

const mapStateProps = state => ({
	nome: state.AutenticacaoReducers.nome,
});

export default connect(mapStateProps, {
	modificaNome,
})(Confirmar);

O Meu AutenticacaoReducers:

import {
    MODIFICA_NOME,
} from './../actions/Types';

const INITIAL_STATE = {
    nome: '',
}

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case MODIFICA_NOME:
            return { ...state, nome: action.payload }
        default:
            return state;
    }
}

O Meu AutenticacaoActions:

import {
  MODIFICA_NOME,
} from './Types';

export const modificaNome = (texto) => {
  return {
    type: MODIFICA_NOME,
    payload: texto
  }
}

2 Respostas 2

-1

Pelo código dá pra entender que vc está importanto a função modificaNome e não a recebendo por props, por isso a mensagem

this.props.modificaNome is not a function

Portanto, seu onChangeText deve ficar assim:

onChangeText={texto => modificaNome(texto)}

Além disso, o value de seu TextInput deve ser uma variável do estado local:

constructor(props) {
    super(props);
    this.state = {
      nome: ''
    };
}
...
<TextInput
    ...
    value={this.state.nome}
    onChangeText={texto => modificaNome(texto)}
/>

Por fim, não é interessante disparar uma ação no redux para cada mudança no texto. Uma melhor alternativa seria alterar o estado atual a cada mudança do texto e ter um botão que envie assim que o usuário desejar:

constructor(props) {
    super(props);
    this.state = {
      nome: ''
    };
}
...
<TextInput
    ...
    value={this.state.nome}
    onChangeText={texto => this.setState({ nome: texto})}
/>
<Button
   onPress={() => modificaNome(this.state.nome)}
   title="Modificar nome"
/>
4
  • Muito obrigado pela ajuda amigo, estou correndo atrás da solução desse problema a dias... Eu realizei essas alterações que você me orientou, mas o erro continua. E não entendo, não é necessário realizar uma alteração no AutenticacaoActions e AutenticacaoReducers? Commented 19/05/2019 às 19:59
  • O erro agora é: AutenticacaoReducers.modificaNome is not a function Commented 19/05/2019 às 20:11
  • 1
    Essa resposta está incorreta. Você está fazendo do jeito certo, tente atualizar o redux e ve no que dá Commented 21/05/2019 às 1:15
  • Tente alterar onPress={() => {}} para onPress={() => false} pode nao ser a solucao, mas isso é uma boa prática Commented 21/05/2019 às 1:17
-1

a função connect recebe dois argumentos que são o mapStatetoProps que deve ser uma função e mapDispatchToProps que pode ser uma função ou um objeto ver documentação, no seu código você está aparentemente importando os reducers mas o certo seria importa as actions ou fazer os dispatch delas, no código que você disponibilizou suas actions estão no arquivo AutenticacaoAction.js MapDispatchtoProps

O fornecimento de um mapDispatchToProps permite que você especifique quais ações seu componente precisará despachar. Ele permite que você forneça funções para despachar as actions como props

import {
    modificaNome
} from '../reducers/AutenticacaoReducers';// vc ta importando as action ou reducers?

 . . .

export default connect(mapStateProps, {
    modificaNome,
})(Confirmar);

no mapStatetoProps você deveria evitar esse encademento que está assim:

const mapStateProps = state => ({
    nome: state.AutenticacaoReducers.nome,
});

tente usar algo mais ou menos assim

const mapStateProps = state => ({
    nome: state.nome,
});

pra que isso der certo ou seja pra que você consiga fazer o state.nome quando você for combinar os reducers você deveria fazer algo assim

combineReducers({ nome: AutenticacaoReducers });

na documentação eles tem um bom tutorial e as boas práticas que são usadas :)

2
  • Não falou nada com nada. O cara tá com o código certinho, o erro pode ser na criação da store. Lucas, edite seu codigo adicionando sua página de rotas/store Commented 21/05/2019 às 1:20
  • @MuriloMedeiros veja que ele tá importando os reducers import { modificaNome } from '../reducers/AutenticacaoReducers';, na documentação não fala sobre dar dispatch em reducers react-redux.js.org/using-react-redux/…, sim pode tbm haver um erro ao criar a store mas não adianta criar a store direitinho se ele ta dando dispatch nos reducers Commented 21/05/2019 às 2:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .