When I use flatlist in RN, I find this error: Cannot read property 'loginname' of undefined - react-native-ios

Question

I just want show a list of the site data to FlatList component,but I find an error:
TypeError: Cannot read property 'loginname' of undefined
therefore, I change '{item.author.loginname}' to '{item.author}', I get this error:
Unhandled JS Exception: Invariant Violation: Objects are not valid as a
React child (found: object with keys {loginname, avatar_url}). If you meant to render a collection of
Actually, property 'loginname' is exists. I am confused. Why?
Here is my code:
import React, { Component } from 'react';
import { Text, ScrollView, View, StyleSheet, FlatList,Image } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
stories: [{id: 1, text: 'option1'}, {id: 2, text: 'option2'}, {id: 3, text: 'option3'}],
isFetching: false,
};
}
componentDidMount() {
this.fetchData();
}
onRefresh() {
console.log('refreshing')
this.setState({ isFetching: true }, function() {
this.fetchData()
});
}
fetchData() {
var url = "https://cnodejs.org/api/v1/topics?limit=1&mdrender=true"
fetch(url, {method: "GET"})
.then((response) => response.json())
.then((responseData) => {
this.setState({stories: responseData.data,isFetching: false})
console.log( responseData.data[0].author.loginname,responseData.data[0].visit_count)
})
.done();
}
_renderItem = ({item}) => (
<View>
<Text>{item.author.loginname}</Text>
</View>
)
render() {
return (
<ScrollView style={styles.container}>
<View style={styles.wrapper}>
<Text>Hello World!!!</Text>
<FlatList
onRefresh={() => this.onRefresh()}
refreshing={this.state.isFetching}
data={this.state.stories}
keyExtractor={(item) => item.id}
renderItem={this._renderItem}
/>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
// alignItems: 'center',
// justifyContent: 'center',
paddingTop: 50,
backgroundColor: '#ecf0f1',
}
});

Answer 1

This issue occurs because of your initial state which is set in constructor. When first-time component try to render at that time it tacks story' state from constructor because of your API fetch tack some moment to complete call.
Just replace your constructore by following line.
constructor(props) {
super(props);
this.state = {
stories: [],
isFetching: false,
};
}

Answer 2

This problem occurred because your view loads first and then your api get called. So your stories is undefined.
Small Update to your code:
this.state = {
stories: null,
isFetching: false,
};
View inside render:
render() {
return (
<ScrollView style={styles.container}>
<View style={styles.wrapper}>
<Text>Hello World!!!</Text>
{this.state.stories !== null ?
<FlatList
onRefresh={() => this.onRefresh()}
refreshing={this.state.isFetching}
data={this.state.stories}
keyExtractor={(item) => item.id}
renderItem={this._renderItem}
/>
: null
}
</View>
</ScrollView>
);
}
Output:
Hello World!!
atian25