0

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

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 })

有谁知道如何修复此错误以便我从主组件导航到配置文件组件？

4

1 回答 1

0

我认为你应该从构造函数绑定你的道具：

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

于 2017-04-30T15:27:59.410 回答