Question

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

undefined不是对象（评估＆＃39; _this.props.user.Range＆＃39;）

错误标记，在这里指出错误：

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

undefined不是本机反应中的对象错误

1 个答案: