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

Posted 2023-02-23

【中文标题】未定义不是本机反应中的对象错误

【英文标题】：undefined is not an object error in react native

【发布时间】：2017-09-28 05:04:25

【问题描述】：

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

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'>distanceValuekm</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 )

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

【参考方案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

【讨论】：

如果你在构造函数中console.log props 怎么办？

当我这样做时，我得到 [object Object]。它说数据未定义，我只是不确定如何或在哪里定义它？

我不明白哪个是 undefined et 哪个是 [object Object] ？基本上你应该使用console.log("descriptor", myObject); 来查看对象（导入点是逗号而不是myObject 之前的+）。然后您可以使用 chrome:inspect for android 检查 Obect（我不记得对于 ios ...）

错误说未定义不是我认为是this.state的对象。当我控制台记录道具时，我得到了 [object Object]