неопределенный не является объект (оценка «this.state.starSide»)

Question

Это мой код:

class StarListScrollViewCell extends Component{ 
static propTypes = { 
    dateSource : React.PropTypes.array 
} 
constructor(props){ 
    super(props); 
    this.state = { 
     starSide : 20, 
    } 
} 
addStar(){ 
    LayoutAnimation.spring(); 
    this.setState({starSide: this.state.starSide + 10}); 
} 
componentWillMount() { 
    LayoutAnimation.spring(); 
} 
render(){ 
    return(
     <View style={{backgroundColor: 'white' , height: 70 , width : Dimensions.get('window').width,flexDirection:'row'}}> 
      <TouchableOpacity style={{backgroundColor: 'red' ,width:Dimensions.get('window').width/7,justifyContent:'center',alignItems:'center'}} 
      onPress = {this.addStar()}> 
       <Image source={require('./star-gray.png')} 
         style ={{width:this.state.starSide, 
          height:this.state.starSide, 
          justifyContent:'center',alignItems:'center'}}> 

       </Image> 
      </TouchableOpacity> 
     </View> 
    ); 
} 

}

Я обнаружил ошибку, когда я нажимаю button.And я пишу это ссылки https://facebook.github.io/react-native/releases/next/docs/animations.html

Answer 1

Вы должны привязать это к addStar, поскольку этот контекст изменяется при вызове из обработчика события.

constructor(props){ 
    super(props); 
    this.state = { 
     starSide : 20, 
    } 

    this.addStar = this.addStar.bind(this); 


} 

<TouchableOpacity onPress = {this.addStar()}> 

Также выше линии будет работать нормально, но она будет называться сразу может быть, которая не является вашей целью, так вместо того, чтобы использовать

<TouchableOpacity onPress = {this.addStar}> 

Answer 2

Вы должны связать контекст обработчику при его использовании в JSX и когда вы установите onPress пропеллер не вызывать метод, просто передать ссылку на него:.

<TouchableOpacity style={{backgroundColor: 'red' ,width:Dimensions.get('window').width/7,justifyContent:'center',alignItems:'center'}} 
      onPress = {this.addStar.bind(this)}> 

Answer 3

Реагировать обработчики не будут автоматически связаны с элементом/класса они находятся в

Изменение onPress = {this.addStar()}> в

onPress = {this.addStar.bind(this)}> 

Answer 4

Вместо связывания вы можете просто использовать стрелки функции:

addStar =() => { 
    LayoutAnimation.spring(); 
    this.setState({starSide: this.state.starSide + 10}); 
} 

И потом:

<TouchableOpacity onPress={this.addStar}>