0
When trying to save a new state in the Redux store it says that such a variable does not exist.
Dispatcher (where it points to error):
export const valorMdoisD = () =>{
return{
type: ALIGN_M,
payload: wertEvl,
}
}
o Mapdispatchto props
AlignVLVarM : (wertEvl) => dispatch(valorMdoisD(wertEvl)),
Trigger function:
this.props.AlignVLVarM({...this.state})
when I try to return the variable wertEvl it gives the error :
Referenceerror: Cant find variable: wertEvl
it points to the codeline of the Dispatcher.
I use the same structure elsewhere in the code but here it doesn’t work..
Follows more complete snippets of the code:
The main component:
import React, { Component } from "react";
import {Text, View, TouchableOpacity, Image, ImageBackground, Picker, Animated, Alert, Button} from "react-native";
import Modal from "react-native-modal";
import { connect } from "react-redux";
import {valorMdoisD,} from './actions/dispatchers'
class ModalAVL0 extends Component {
state = {
isModalVisible: false,
cor: 1,
letra: 1 ,
numero: 1,
wertEvl: 0,
anpassung: 1.7,
};
inversoCor = (wert) =>
{
var anpassung = 1.7
var invF = wert
var invG = invF/anpassung
var invH = (invG-1)/208
var invCor = parseInt(invH, 10)
if (invCor===0) {
return (
<View>
<Text>Rot</Text>
</View>
)
}else if(invCor===1){
return(
<View>
<Text>Blau</Text>
</View>
)
}else if(invCor===2){
return(
<View>
<Text>Grün</Text>
</View>
)
}else {
return(
<View>
<Text>Schwarz</Text>
</View>
)
}
}
inversoBuch = (wert) =>
{
var anpassung = 1.7
var invF = wert
var invG = invF/anpassung
var invH = (invG-1)/208
var invI = parseInt(invH, 10)
var invJ = invG-(invI*208)
var invK = (invJ-1)/8
var invBuch = parseInt(invK,10)
if (invBuch===0) {
return (
<View>
<Text>A</Text>
</View>
)
}else if(invBuch===1){
return(
<View>
<Text>B</Text>
</View>
)
}else if(invBuch===2){
return(
<View>
<Text>C</Text>
</View>
)
}else if(invBuch===3){
return(
<View>
<Text>D</Text>
</View>
)
}else if(invBuch===4){
return(
<View>
<Text>E</Text>
</View>
)
}else if(invBuch===5){
return(
<View>
<Text>F</Text>
</View>
)
}else if(invBuch===6){
return(
<View>
<Text>G</Text>
</View>
)
}else if(invBuch===7){
return(
<View>
<Text>H</Text>
</View>
)
}else if(invBuch===8){
return(
<View>
<Text>I</Text>
</View>
)
}else if(invBuch===9){
return(
<View>
<Text>J</Text>
</View>
)
}else if(invBuch===10){
return(
<View>
<Text>K</Text>
</View>
)
}else if(invBuch===11){
return(
<View>
<Text>L</Text>
</View>
)
}else if(invBuch===12){
return(
<View>
<Text>M</Text>
</View>
)
}else if(invBuch===13){
return(
<View>
<Text>N</Text>
</View>
)
}else if(invBuch===14){
return(
<View>
<Text>O</Text>
</View>
)
}else if(invBuch===15){
return(
<View>
<Text>P</Text>
</View>
)
}else if(invBuch===16){
return(
<View>
<Text>Q</Text>
</View>
)
}else if(invBuch===17){
return(
<View>
<Text>R</Text>
</View>
)
}else if(invBuch===18){
return(
<View>
<Text>S</Text>
</View>
)
}else if(invBuch===19){
return(
<View>
<Text>T</Text>
</View>
)
}else if(invBuch===20){
return(
<View>
<Text>U</Text>
</View>
)
}else if(invBuch===21){
return(
<View>
<Text>V</Text>
</View>
)
}else if(invBuch===22){
return(
<View>
<Text>W</Text>
</View>
)
}else if(invBuch===23){
return(
<View>
<Text>X</Text>
</View>
)
}else if(invBuch===24){
return(
<View>
<Text>Y</Text>
</View>
)
}else {
return(
<View>
<Text>Z</Text>
</View>
)
}
}
inversoStri = (wert) =>
{
var anpassung = 1.7
var invF = wert
var invG = invF/anpassung
var invH = (invG-1)/208
var invI = parseInt(invH, 10)
var invJ = invG-(invI*208)
var invK = (invJ-1)/8
var invL = parseInt(invK,10)
var invM = invG-(invI*208)-(invL*8)
var invStri = parseInt(invM,10)
if (invStri===1) {
return (
<View>
<Text>|</Text>
</View>
)
}else if(invStri===2){
return(
<View>
<Text>||</Text>
</View>
)
}else if(invStri===3){
return(
<View>
<Text>|||</Text>
</View>
)
}else if(invStri===4){
return(
<View>
<Text>||||</Text>
</View>
)
}else if(invStri===5){
return(
<View>
<Text>|||||</Text>
</View>
)
}else if(invStri===6){
return(
<View>
<Text>||||||</Text>
</View>
)
}else if(invStri===7){
return(
<View>
<Text>|||||||</Text>
</View>
)
}else {
return(
<View>
<Text>||||||||</Text>
</View>
)
}
}
oqueleu = () => {
this.setState({wertEvl: ((this.state.cor*208)+(this.state.letra*8) +this.state.numero)*this.state.anpassung})
console.log(this.state.wertEvl)
}
oquetem = () =>{
this.props.AlignVLVarM({...this.state})
console.log(this.props.wertEvl)
}
renderModalContent = () => (
<View style={{
flex: 1,
flexDirection: 'column',
backgroundColor: '#f2f2f2',
justifyContent: 'center',
alignItems: 'center',
borderColor: 'rgba(0, 0, 0, 1.0)',
width: 375,
height: 615,
}}>
<ImageBackground source={require('./modalEC.png')} style={{width: '100%', height: '100%', alignItems: 'center', justifyContent: 'space-between'}}>
<Image source={require('./Rule.jpg')} style={{width: 375, height: 60}}></Image>
<TouchableOpacity onPress={this.oqueleu}
style={{
borderRadius: 2,
backgroundColor: '#000080',
width: 120,
height: 45,
marginTop: 20,
marginBottom: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0.15,
shadowRadius: 1,
elevation: 2,
}}>
<Text style={{flex: 1, color: '#ffffff', fontSize: 20, textAlign: 'center', textAlignVertical: 'center', fontWeight: 'bold',}}>
Rechnen
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.oquetem}
style={{
borderRadius: 2,
backgroundColor: '#000080',
width: 120,
height: 45,
marginTop: 20,
marginBottom: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0.15,
shadowRadius: 1,
elevation: 2,
}}>
<Text>Teste</Text>
</TouchableOpacity>
<View style={{flex: 1, flexDirection: 'row',}}>
<View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent:'flex-start',}}>
<Text style={{flex: 1, color: '#ffffff', fontSize: 25, textAlign: 'center', textAlignVertical: 'center', fontWeight: 'bold',}}> Aktuelle Werte ablesen </Text>
<View style={{backgroundColor: '#ffffff', marginBottom: 10,}}>
<Picker
selectedValue={this.state.cor}
style={{height: 40, width: 132, borderRadius: 2, fontSize: 15,}}
onValueChange={(itemValue, itemIndex) => this.setState({cor: itemValue})}>
<Picker.Item label='Rot' value={1}/>
<Picker.Item label='Blau' value={2}/>
<Picker.Item label='Grün' value={3}/>
<Picker.Item label='Schwarz' value={4}/>
</Picker>
</View>
<View style={{backgroundColor: '#ffffff', marginBottom: 10,}}>
<Picker
selectedValue={this.state.letra}
style={{height: 40, width: 132, borderRadius: 2, fontSize: 15,}}
onValueChange={(itemValue, itemIndex) => this.setState({letra: itemValue})}>
<Picker.Item label='A' value={1}/>
<Picker.Item label='B' value={2}/>
<Picker.Item label='C' value={3}/>
<Picker.Item label='D' value={4}/>
<Picker.Item label='E' value={5}/>
<Picker.Item label='F' value={6}/>
<Picker.Item label='G' value={7}/>
<Picker.Item label='H' value={8}/>
<Picker.Item label='I' value={9}/>
<Picker.Item label='J' value={10}/>
<Picker.Item label='K' value={11}/>
<Picker.Item label='L' value={12}/>
<Picker.Item label='M' value={13}/>
<Picker.Item label='N' value={14}/>
<Picker.Item label='O' value={15}/>
<Picker.Item label='P' value={16}/>
<Picker.Item label='Q' value={17}/>
<Picker.Item label='R' value={18}/>
<Picker.Item label='S' value={19}/>
<Picker.Item label='T' value={20}/>
<Picker.Item label='U' value={21}/>
<Picker.Item label='V' value={22}/>
<Picker.Item label='W' value={23}/>
<Picker.Item label='X' value={24}/>
<Picker.Item label='Y' value={25}/>
<Picker.Item label='Z' value={26}/>
</Picker>
</View>
<View style={{backgroundColor: '#ffffff', marginBottom: 10,}}>
<Picker
selectedValue={this.state.numero}
style={{height: 40, width: 132, borderRadius: 2, fontSize: 15,}}
onValueChange={(itemValue, itemIndex) => this.setState({numero: itemValue})}>
<Picker.Item label='1' value={1}/>
<Picker.Item label='2' value={2}/>
<Picker.Item label='3' value={3}/>
<Picker.Item label='4' value={4}/>
<Picker.Item label='5' value={5}/>
<Picker.Item label='6' value={6}/>
<Picker.Item label='7' value={7}/>
<Picker.Item label='8' value={8}/>
</Picker>
</View>
<Text style={{flex: 1, color: '#ffffff', fontSize: 25, textAlign: 'center', textAlignVertical: 'center', fontWeight: 'bold',}}> Ziel Werte </Text>
<View style={{backgroundColor: '#ffffff', marginBottom: 10,}}>
{this.inversoCor(this.props.outro)}
</View>
<View style={{backgroundColor: '#ffffff', marginBottom: 10,}}>
{this.inversoBuch(this.props.outro)}
</View>
<View style={{backgroundColor: '#ffffff', marginBottom: 30,}}>
{this.inversoStri(this.props.outro)}
</View>
</View>
<View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center',}}>
<Image source={require('./VLF1.png')} style={{width: 187, height: 483}}></Image>
</View>
</View>
</ImageBackground>
</View>
)
toggleModal = () => {
this.setState({ isModalVisible: !this.state.isModalVisible });
// Alert("Hintere Skala ablesen")
};
componentWillMount() {
this.animatedValue = new Animated.Value(0)
Animated.timing(this.animatedValue, {
toValue: 150,
duration:9000
}).start()
}
render() {
const interpolateColor = this.animatedValue.interpolate({
inputRange: [0, 150],
outputRange: ['rgba(76, 175, 80, 0.0)', 'rgba(76, 175, 80, 0.6)']
})
return (
<View>
<TouchableOpacity onPress={this.toggleModal} style={{backgroundColor:'rgba(0, 0, 0, 0)', width: 95, height: 200,}}>
<Animated.View style={{backgroundColor: interpolateColor, width: 25, height: 38, borderRadius: 25, marginTop: 47, marginLeft: 5,}}></Animated.View>
</TouchableOpacity>
<Modal isVisible={this.state.isModalVisible} onBackdropPress={() => this.setState({ isVisible: false })}>
<View style={{ flex: 1}}>
{this.renderModalContent()}
</View>
</Modal>
</View>
);
}
}
function mapStateToProps(state){
return{
outro: state.MdoisD,
valorRef: state.AdoisC
}
}
function mapDispatchToProps(dispatch){
return{
AlignVLVarM : (wertEvl) => dispatch(valorMdoisD(wertEvl)),
}
}
export default connect(mapStateToProps,mapDispatchToProps)(ModalAVL0)
My Reducer activity has more than 1000 lines of code so I will only put the case that is activated in that part of the code:
case ALIGN_M:
return{
...state,
MdoisD: action.payload.wertEvl
}
As I mentioned at the beginning, I have hundreds of interactions like this all over the app, but only here gave this error.
Thanks already for the help :D
Need to put the minimum example only these snippets does not help
– novic
Done, but I’m totally lost yet.. :/
– Itoh