React native 无法读取未定义的属性

我正在将数组映射到组件

{this.state.forms.map((data)=><Box  data={data} />)}

{this.state.forms.map（（数据）=>）}

组件框的代码为

import React,{Component} from 'react'
import {View,Text,ScrollView,Image,Button,StyleSheet,AsyncStorage} from 'react-native'

class Login extends Component{


    constructor(props){
        super(props)
        this.state = {
            forms:[],
        }
        this.onSetCompany = this.onSetCompany.bind(this)
    }
    onSetCompany(data){
            console.log(data)   
//          AsyncStorage.setItem('Company',data);
            this.props.navigation.navigate('CompanyDeatails')

    }
    render(){
        return(
            <View style={style.container}>
                {console.log(this.props.data)}
                <View style={style.box}>
                    <View style={style.box1}>
                        <Text style={style.row2}>{this.props.data.CompanyName} bkb</Text>
                    </View> 
                    <View style={style.box3}>
                        <Text style={style.row2}>{this.props.data.LastDate} </Text>
                    </View>
                        </View>
                <View style={style.buttonBox}>
                    <View style={style.button}>
                        <Button  color="#6d5d17" title="Fill" onPress={()=>this.props.navigation.navigate('CompanyDeatails')}></Button>
                    </View>
                </View>
            </View>
        )
    }
}

export default Login


var style = StyleSheet.create({
 .....  

})

import React，{Component}来自“React”
从“react native”导入{视图、文本、滚动视图、图像、按钮、样式表、异步存储}
类登录扩展组件{
建造师（道具）{
超级（道具）
此.state={
表格：[]，
}
this.onSetCompany=this.onSetCompany.bind（this）
}
onSetCompany（数据）{
console.log（数据）
//AsyncStorage.setItem（'公司'，数据）；
this.props.navigation.navigate（'companyDatails'））
}
render（）{
返回(
{console.log（this.props.data）}
{this.props.data.CompanyName}bkb
{this.props.data.LastDate}
this.props.navigation.navigate（'companyDatails'）}>
)
}
}
导出默认登录名
var style=StyleSheet.create({
.....  
})

我的路线呢

export default class App extends Component{
    render(){
        return(
                <Links />
            )
    }
}

const Links = DrawerNavigator({.....,
                            CompanyDeatails:{screen:CompanyDeatails},
                                ....,
                                },{contentComponent:props => <Slider {...props}/>
                            })

导出默认类应用程序扩展组件{
render（）{
返回(
)
}
}
const Links=DrawerNavigator（{。。。。。，
公司数据：{屏幕：公司数据}，
....,
}，{contentComponent:props=>
})

当我将数组映射到框中时，该框中的导航不起作用。我的应用程序的其余部分中有工作导航，但此特定组件中没有
喜欢 在login.js中，我有

this.props.navigation.navigate（'C1'）

这是工作，但当我粘贴相同的线框组件它抛出错误。

---

无法读取未定义的属性导航

如果

框

组件不是

导航器

的一部分，则应将其包装在

with navigation

函数中，以便访问

导航

对象。看看医生

考虑下面的例子

import React from 'react';
import { withNavigation } from 'react-navigation';

class Box extends React.Component {
  ...
  render() {
    ...
  }
}

export default withNavigation(Box);

现在，在Box组件中，您可以访问

this.props.navigation.navigate

功能

---

希望这会有帮助

我刚开始反应，从这个答案中我学到了非常有价值的概念。谢谢你的回答。很高兴听到这个。