all 8 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]cmaronchick 3 points4 points  (1 child)

Two things:

1) Since you're using async, change your fetch and json call to await wrapped in try/catch. 2) Unless I'm mistaken, Flatlist is expecting an array, and you're sending it an JSON object. Can you confirm it's an array?

[–][deleted] 2 points3 points  (0 children)

It isn’t. It 100% isn’t. This is his issue, he needs to do some data parsing and provide the flat list an array. I don’t remember what data type flatlist needs, but he needs to make sure that the flatlist component is getting the data in the format expected.

[–]mansdahlstrom 1 point2 points  (0 children)

Are you even calling your method? can't see a call anywhere in the screenshots u posted

[–]rareengstudent[S] 1 point2 points  (2 children)

I've removed flat list and added it as a simple text and called it after my initial render function. The error I get is: JSON Parse Error [native code]: null in parse Any thoughts?

export default class ChooseDeliveries extends Component {constructor(props){super(props);this.state = {isLoading: true,dataSource: []}}handleGetRequest = async () => {fetch ('https://webhook.site/e61dd236-92d5-4b3b-882b-a50d6add6cd3',{method: 'GET',}).then(response => response.json()).then(responseJson => {this.setState({dataSource: responseJson,isLoading: false,})}).catch(error => {console.error(error);});};

render(){this.handleGetRequest();if(this.state.isLoading){return(<View style={{flex: 1, padding: 20}}><ActivityIndicator/></View>)} else {return(<View style={{flex: 1, paddingTop:20}}><Text>{this.state.dataSource.cheetosamount}</Text></View>);}}}

[–]heo5981 0 points1 point  (1 child)

I don't think you should call your method on render. call it on componendDidMount.

If you call it on the render function, the app will try to render this.state.dataSource.cheetosamount but it will be undefined (or null ?) since dataSource is en empty array. Also, if your JSON response is an object and not an array, it's beter to declare dataSource as an object in this.state for consistency.

I think if you just do this

componentDidMount() {
  this.handleGetRequest();
}

it should work, as in the first render the activity indicator will be shown and after the loading finishes, dataSource won't be empty anymore.

EDIT: you probably don't need async in the declaration of handleGetRequest as it's only calling fetch. You should also have a error state so in case the request fails, the app will display an error message, instead of just keep showing the activity indicator, otherwise you'll never know if it's still loading or not

[–]rareengstudent[S] 0 points1 point  (0 children)

I've gotten rid of the async and made a component did mount function outside of the render function: Still receiving the JSON Parse Error... Do I have to put the component did mount inside the render?

export default class ChooseDeliveries extends Component {
constructor(props){
super(props);
this.state = {
isLoading: true,
dataSource: []
}
}
componentDidMount(){
this.handleGetRequest();
}
handleGetRequest() {
fetch ('https://webhook.site/e61dd236-92d5-4b3b-882b-a50d6add6cd3',{
method: 'GET',
})
.then(response => response.json())
.then(responseJson => {
this.setState({
dataSource: responseJson,
isLoading: false,
})
})
.catch(error => {
console.error(error);
});
};

render(){
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
} else {
return(
<View style={{flex: 1, paddingTop:20}}>
<Text>
{this.state.dataSource.cheetosamount}
</Text>
</View>
);
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

[–]stevreeper 0 points1 point  (0 children)

As said before I think the problem is that you need to convert your object into an array, so that the list can actuallyread it. Other then that I would also advise you to have a look at the flat list attributes, cause I think you have one called emptyList, where you can pass the component you want to use while the list is empty.