javascript - react native "attempt to set value to an immutable object" - Stack Overflow

admin管理员组

文章数量:1335380

I'm creating a draggable box. which I can drag anywhere on the screen but I'm getting this error which says that "You attempted to set the key _value on an object that is meant to be immutable and has been frozen". Can anyone tell me what am I doing wrong.

My Code:

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  Button,
  ScrollView,
  Dimensions,
  PanResponder,
  Animated,
  View
} from 'react-native'

import { StackNavigator } from 'react-navigation'




export default class Home extends Component{

ponentWillMount(){

  this.animatedValue = new Animated.ValueXY();

this.panResponder = PanResponder.create({

 onStartShouldSetPanResponder: (evt, gestureState) => true,
  onMoveShouldSetPanResponder: (evt, gestureState) => true,
  onPanResponderGrant: (e, gestureState) => {



      },

  onPanResponderMove:Animated.event([


null,{dx: this.animatedValue.x , dy:this.animatedValue.y}

    ]),  
  onPanResponderRelease: (e, gestureState) => { 
      },       
})
}

  render(){

    const animatedStyle = {

      transform:this.animatedValue.getTranslateTransform()
    }

    return(

        <View style={styles.container}>

        <Animated.View style={[styles.box ,animatedStyle]} {...this.panResponder.panHandlers}>


        <Text>Home</Text>


        </Animated.View>
        </View>
      )
  }
}


var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginLeft: 10,
    marginRight: 10,
    alignItems: 'stretch',
    justifyContent: 'center',
  },

  box:{

height:90,
width:90,
textAlign:'center'



  }
});

I'm creating a draggable box. which I can drag anywhere on the screen but I'm getting this error which says that "You attempted to set the key _value on an object that is meant to be immutable and has been frozen". Can anyone tell me what am I doing wrong.

My Code:

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  Button,
  ScrollView,
  Dimensions,
  PanResponder,
  Animated,
  View
} from 'react-native'

import { StackNavigator } from 'react-navigation'




export default class Home extends Component{

ponentWillMount(){

  this.animatedValue = new Animated.ValueXY();

this.panResponder = PanResponder.create({

 onStartShouldSetPanResponder: (evt, gestureState) => true,
  onMoveShouldSetPanResponder: (evt, gestureState) => true,
  onPanResponderGrant: (e, gestureState) => {



      },

  onPanResponderMove:Animated.event([


null,{dx: this.animatedValue.x , dy:this.animatedValue.y}

    ]),  
  onPanResponderRelease: (e, gestureState) => { 
      },       
})
}

  render(){

    const animatedStyle = {

      transform:this.animatedValue.getTranslateTransform()
    }

    return(

        <View style={styles.container}>

        <Animated.View style={[styles.box ,animatedStyle]} {...this.panResponder.panHandlers}>


        <Text>Home</Text>


        </Animated.View>
        </View>
      )
  }
}


var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginLeft: 10,
    marginRight: 10,
    alignItems: 'stretch',
    justifyContent: 'center',
  },

  box:{

height:90,
width:90,
textAlign:'center'



  }
});

• javascript
• android
• reactjs
• react-native
• react-animated

Share Improve this question Follow edited Jun 22, 2017 at 7:17 Vish_TS asked Jun 21, 2017 at 20:04 Vish_TSVish_TS 54022 gold badges77 silver badges1919 bronze badges 5

• Got a line number? My guess is it has to do with that const animatedStyle, since "immutable" means "cannot be changed". this.animatedValue.getTranslateTransform() may not be constant. I'm not 100% sure, but changing const to var might do the trick, but I'm not sure why you set that to const to begin with so maybe I'm wrong. LMK if it works, and if so I'll add this as an Answer instead of a ment. – Jake T. Commented Jun 21, 2017 at 20:10
• Thank you for looking forward to my question sir, I tried but still same error. :( – Vish_TS Commented Jun 21, 2017 at 20:17
• 1 not sure if this is the issue, but you misspelled 'transform' in animatedStyle – Matt Aft Commented Jun 21, 2017 at 23:21
• thanx for pointing out @Matt Aft. I Typed it wrong on stack although it is right in my code. – Vish_TS Commented Jun 22, 2017 at 7:19
• @MattAft wow I actually had transform spelled wrong in my code. thanks! haha – Cole Commented Oct 6, 2017 at 0:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

In my case I got this error because I forgot to change the View into Animated.View.

Try this out. This will solve your issue. You need to initialize animatedValue in state object to make it work.

constructor(props) {
  super(props);
  this.state = {
    animatedValue: new Animated.ValueXY()
  }
}

onPanResponderMove:Animated.event([
 null,{dx: this.state.animatedValue.x , dy:this.state.animatedValue.y}
]),

本文标签： javascriptreact native quotattempt to set value to an immutable objectquotStack Overflow