未定义不是本机反应中的对象错误

Question

我正在尝试通过使用反应导航按下侧面菜单中的按钮来创建到屏幕的路线。当我尝试实现它时，我收到以下错误：

undefined 不是一个对象（评估 '_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)

我试图从中导航的是主屏幕组件。我在 Home 组件中为此使用的功能是：

() => 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