undefined不是反應本機中的對象錯誤

Question

我試圖通過使用反應導航按下側面菜單中的按鈕來創建路由到屏幕。當我嘗試實現它，我得到以下錯誤：

undefined is not an object (evaluating '_this.props.user.Range')

錯誤標誌，點的東西錯在這裏：

RangeValues: this.props.user.Range 

我試圖導航到組件的其餘部分在這裏：

import React, {Component} from 'react' 
    import { 
     StyleSheet, 
     View, 
     Text, 
     Switch, 
    } from 'react-native' 

    import Slider from 'react-native-multislider' 

    export default class Profile extends Component { 
     state = { 
     RangeValues: this.props.user.Range, 
     distanceValue: [this.props.user.distance] 
     } 
    render() { 
     const {name, work, id} = this.props.user 
     const {RangeValues, distanceValue} = this.state 
    return (
      <View style={styles.container}> 
      <View style={styles.profile}> 
       <Text style={{fontSize:20}}>{name}</Text> 
      </View> 
      <View style={styles.label}> 
       <Text>Distance</Text> 
       <Text style={{color:'darkgrey'}}>{distanceValue}km</Text> 
      </View> 
      <Slider 
       min={1} 
       max={100} 
       values={distanceValue} 
       onValuesChange={val => this.setState({distanceValue:val})} 
       onValuesChangeFinish={val => this.updateUser('distance', val[0])} 
      /> 
      <View style={styles.label}> 
       <Text>Age Range</Text> 
       <Text style={{color:'darkgrey'}}>{ageRangeValues.join('-')}</Text> 
      </View> 
      <Slider 
       min={1} 
       max={200} 
       values={RangeValues} 
       onValuesChange={val => this.setState({RangeValues:val})} 
       onValuesChangeFinish={val => this.updateUser('Range', val)} 
      /> 
      </View> 
     ) 
     } 
    } 

我想用棧航海家從抽屜一鍵導航，我的路由如下：

import { StackNavigator } from 'react-navigation'; 
import React from 'react'; 
import Home from './screens/home'; 
import Login from './screens/login'; 
import Profile from './screens/profile'; 

const RouteConfigs = { 
    Login: { screen: Login }, 
    Home: { screen: Home }, 
    Profile: { screen: Profile }, 
}; 

const StackNavigatorConfig = { 
    headerMode: 'none', 
} 

export default StackNavigator(RouteConfigs, StackNavigatorConfig) 

我試圖導航的位置是主屏幕組件。我已經使用這個主組件內的功能是：

() => this.props.navigation.navigate('Profile', { user: this.state.user }) 

有誰知道怎麼做才能解決這個錯誤，我從家裏組件成型件導航？

Answer 1

我想你應該從構造綁定你的道具：

export class MyClass extends Component { 
    constructor(props) { 
    super(props); 
    if (!this.state) { 
     this.state = { 
     data: props.myData 
     } 
    } 

    render() {DO THE JOB HERE} 
    } 
} 

然後你就可以訪問到this.state而不是state

更多的解釋，props尚未公佈，因爲構造尚未通過。請參閱組件文檔：https://facebook.github.io/react/docs/react-component.html#constructor