如何在<FlatList>上显示fetch()中的数组？
如何在<FlatList>上显示fetch()中的数组？
提问于 2018-08-11 02:26:13
请记住，我对react-native和所有这些都是新手，所以请期待一些愚蠢的代码。
我很难尝试在一个简单的视图中显示它们，但它不起作用。
即使使用componentDidMount()，它也会显示错误'null is not a object‘(计算'this.state.groups.map')
如果你们有任何建议，教程或指南，请随时分享。
export default class Request extends Component {
state = {
id: null,
cod: '',
description: '',
groups: null,
}
componentDidMount(){
this.pullRequest()
}
pullRequest = async() => {
try{
const response = await fetch(url)
const results = await response.json()
this.setState({groups: results.group})
console.log(results)
console.log(this.state.groups[0])
}catch(err){
console.error(err)
}
}
postRequest = async() => {
const model = { 'id' : this.state.id,
'cod' : this.state.cod,
'description': this.state.description,
'entity' : this.state.id, //yeet
}
try{
const response =
await fetch(url,{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(model),
})
const result = await response.json()
this.setState({groups : result.group})
console.log(this.state.groups)
console.log('postresult: ')
console.log(result)
}catch(err){
console.error(err)
}
}
handleRequestId = id => {
this.setState({id})
}
handleRequestCod = cod => {
this.setState({cod})
}
handleRequestDescription = description => {
this.setState({description})
}
requestPress = id => {
// this.setState({tSample: this.state.id})
}
render() {
return (
<KeyboardAvoidingView behavior="padding" style={styles.loginContainer}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss} >
<View style={[styles.logoContainer]}>
<Image
style={styles.logo}
source={require('../assets/Icons/logo.png')}
/>
//<Text style={styles.title}>NODE</Text>
<View style={styles.voidView} > // I'm trying to show it here.
{this.state.groups.map(group => (
<Text>{group.cod}</Text>
))}
</View>
</View>
</TouchableWithoutFeedback>
<View style={styles.formContainer}>
<TextInput
style={styles.input}
placeholder="ID"
placeholderTextColor="rgba(255,255,255,0.7)"
value={this.state.id}
onChangeText={this.handleRequestId}
returnKeyType="go"
// onSubmitEditing={this.setState.status}
keyboardType="default"
autoCapitalize="none"
autoCorrect={false}
/>
<TextInput
style={styles.input}
placeholder="Cod"
placeholderTextColor="rgba(255,255,255,0.7)"
value={this.state.codigo}
onChangeText={this.handleRequestCod}
returnKeyType="go"
// onSubmitEditing={this.setState.status}
keyboardType="default"
autoCapitalize="none"
autoCorrect={false}
/>
<TextInput
style={styles.input}
placeholder="Description"
placeholderTextColor="rgba(255,255,255,0.7)"
value={this.state.descricao}
onChangeText={this.handleRequestDescription}
returnKeyType="go"
// onSubmitEditing={this.setState.status}
keyboardType="default"
autoCapitalize="none"
autoCorrect={false}
/>
<Button
style={styles.buttonContainer}
onPress={this.pullRequest}
title="REQUEST"
// color="#0sd0a2"
/>
<View>
<Text>\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/</Text>
</View>
<Button
style={styles.buttonContainer}
onPress={this.postRequest}
title="POST"
// color="#0sd0a2"
/>
</View>
</KeyboardAvoidingView>
);
}
}回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-11 03:52:48
define initial state
constructor(props){
super(props);
state = {
groups: []
}
}
componentWillMount() {
**//once you fetch the data and updated the state like**
this.setState({groups: results.group}) **// response**
}
in render
renderItem = ({item}) => {
//how you need to view
}
render(){
return(
<FlatList
data={this.state.grops} // you need to send array of objects
renderItem={({item}) => this.renderItem}
/>
);
}Stack Overflow用户
发布于 2018-08-12 08:30:17
当您将groups作为一个状态为state = { groups: [] }的数组时，您可以将其初始化为一个数组。this.setState({groups: results.group})将使用您获得的值覆盖该数组。its不会将其添加到groups: []。
您可以使用获得的数组对象初始化组，并对其执行map操作。我不确定你得到的内容的格式，但它可能像state = { groups: {map: [] }}或其他什么，这取决于你得到的是什么。或者，如果您想将值推入初始化的空数组，则可以执行.concat()。
Stack Overflow用户
发布于 2018-08-11 05:03:05
失败的原因是您将groups定义为null，因此在第一次呈现时，它会尝试在null上调用"map“。应该用一个空数组来初始化它，而不是用null来初始化，这样就可以定义映射函数了。在您的组件中，fetch调用是异步的，因此在调用完成之前，一开始将不会显示任何数据。拥有一个空数组可以解决这种情况。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51792184
复制相关文章
相似问题
腾讯云开发者
