如何修复 undefined 不是在渲染中列出状态的函数
开发者
我在列出用户的所有详细信息时遇到问题，我不明白为什么错误显示我的映射未定义不是函数。我创建了一个函数，它在函数内部是用户列表，所以在我列出用户之后，我把它放在渲染上，但是映射显示未定义的函数..
我将向你们展示我已经制作的示例代码：
构造函数：
constructor(props) {
super(props);
this.state = {
driver_id:'',
driver_history_list:[]
}
this.renderCardHistoryList = this.renderCardHistoryList.bind(this);
}
山：
async componentDidMount() {
NavigationBar.setColor('white')
NavigationBar.setStatusBarColor('#008E9B',true)
NavigationBar.setStatusBarTheme('white',true)
const ids_driver = await AsyncStorage.getItem('IDS');
axios.get('http://192.168.100.111:8001/api/driver_history/'+ids_driver)
.then((response) => {
this.setState({
driver_history_list:response
})
}).catch(function(error) {
alert(JSON.stringify(error));
})
}
功能：
renderCardHistoryList() {
const history_list = Array.isArray(this.state.driver_history_list) && this.state.driver_history_list || [];
return history_list.map(driver_info => {
return (
<Card>
<CardItem header button onPress={() => alert("This is Card Header")}>
<Left style={{flex:1}}>
</Left>
<Right>
<Text style={{fontSize:15}}>12 May 2019, 08:46pm</Text>
</Right>
</CardItem>
<CardItem button onPress={() => alert("This is Card Body")}>
<Body style={{bottom:'6%',position:'relative'}}>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<Icon type="MaterialCommunityIcons" name='store' style={{fontSize:20,color:'#0a60ff'}}/>
<Text style={{marginLeft:'5%',fontSize:14}}>Store 1790</Text>
</View>
<Icon type="Entypo" name='dots-two-vertical' style={{fontSize:12,marginLeft:'1%',color:'grey',marginTop:'1%'}}/>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center',marginTop:'1%' }}>
<Icon type="MaterialCommunityIcons" name='map-marker-radius' style={{fontSize:20,color: "#f92223"}} />
<Text style={{marginLeft:'5%',fontSize:14}}></Text>
</View>
<Icon type="Entypo" name='dots-two-vertical' style={{fontSize:12,marginLeft:'1%',color:'grey',marginTop:'1%'}}/>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center',marginTop:'1%' }}>
<Icon type="Ionicons" name='ios-checkmark-circle' style={{fontSize:20,color: "#FF9501"}} />
<Text style={{marginLeft:'5%',fontSize:14}}></Text>
</View>
</Body>
</CardItem>
</Card>
)
})
}
使成为：
render() {
return (
<Container>
<Header style={{backgroundColor:'#008E9B'}}>
<Left style={{flex:1}}>
<Button transparent>
<Icon name='arrow-back' />
</Button>
</Left>
<Body style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Title>History</Title>
</Body>
<Right style={{flex: 1}} />
</Header>
<Content padder>
{this.renderCardHistoryList()}
</Content>
</Container>
)
}
结果：
六月 L。
验证您的阵列。 const history_list= this.state.driver_history_list || [];
renderCardHistoryList() {
const history_list = Array.isArray(this.state.driver_history_list) && this.state.driver_history_list || [];
return history_list.map(driver_info => {
return (
<Card>
<CardItem header button onPress={() => alert("This is Card Header")}>
<Left style={{flex:1}}>
</Left>
<Right>
<Text style={{fontSize:15}}>12 May 2019, 08:46pm</Text>
</Right>
</CardItem>
<CardItem button onPress={() => alert("This is Card Body")}>
<Body style={{bottom:'6%',position:'relative'}}>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<Icon type="MaterialCommunityIcons" name='store' style={{fontSize:20,color:'#0a60ff'}}/>
<Text style={{marginLeft:'5%',fontSize:14}}>Store 1790</Text>
</View>
<Icon type="Entypo" name='dots-two-vertical' style={{fontSize:12,marginLeft:'1%',color:'grey',marginTop:'1%'}}/>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center',marginTop:'1%' }}>
<Icon type="MaterialCommunityIcons" name='map-marker-radius' style={{fontSize:20,color: "#f92223"}} />
<Text style={{marginLeft:'5%',fontSize:14}}></Text>
</View>
<Icon type="Entypo" name='dots-two-vertical' style={{fontSize:12,marginLeft:'1%',color:'grey',marginTop:'1%'}}/>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center',marginTop:'1%' }}>
<Icon type="Ionicons" name='ios-checkmark-circle' style={{fontSize:20,color: "#FF9501"}} />
<Text style={{marginLeft:'5%',fontSize:14}}></Text>
</View>
</Body>
</CardItem>
</Card>
)
})
}
编辑
您正在将整个响应设置为 driver_history_list，这是一个将其更改为的对象。
driver_history_list: response.data
笔记
始终验证您的数据。不要假设您将始终获得正确的数据。使用对象时，始终验证它们，这样做data.name可能会破坏您的应用程序，如果data为 null 或未定义。例如，给定以下对象。
const animal = {};
正在做
// throws an error, Cannot read property 'toLowerCase' of undefined
console.log(animal.name.toLowerCase())
为了防止这种情况发生，我们需要检查属性是否存在，如下所示。
// checks if the name property exists console name, else assign a console log 'Lion'
console.log(animal.name && animal.name.toLowerCase() || 'Lion')
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何修复Javascript函数的“ Typerror is undefined”消息？
- 2
如何修复返回`undefined`的异步函数？
- 3
如何修复PHP中的Undefined offset-Error
- 4
如何修复undefined symbol：drmGetDevice的genymotion错误？
- 5
如何修复PipeOP的状态？
- 6
如何修复递归函数？
- 7
如何修复“ this.reduce（）不是函数”？
- 8
如何修复 this.state.*.map 不是函数？
- 9
Angular 如何修复 TypeError：getUnfinishedItemsNumber 不是函数？
- 10
如何修复 .default.ref 不是函数？
- 11
如何修复固定块中的文本渲染？
- 12
如何修复反应中的限制渲染循环
- 13
如何修复TypeError _interopRequireDefault不是Create React App中的函数
- 14
如何修复puppeteer中的“ page.target不是函数”？
- 15
如何修复eslint createRequire不是Atom Editor中的函数？
- 16
如何修复TypeError _interopRequireDefault不是Create React App中的函数
- 17
如何在WordPress中修复“未定义不是函数”
- 18
undefined不是canjs中的函数
- 19
undefined不是ejs中的函数
- 20
如何修复“不是GZIP格式”？
- 21
如何修复“不是过程”错误
- 22
如何修复'Undefined reference'错误OpenCV和G ++
- 23
如何修复Uncaught（承诺）TypeError：无法设置undefined属性
- 24
如何修复javascript日期函数
- 25
如何修复这个 forEach 函数？
- 26
如何修复HTML中的错误
- 27
如何修复php中的递归？
- 28
如何修复 NameError: 在 Python 中？
- 29
如何修复 Java 中的 NoSuchMethodError
我来说两句