Reputation: 23
REACT NATIVE
I'm using Navigation to move between components equal to this one, only with different ID. Some work and some don't, and react native shows me this warning.
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in "the componentWillUnmount method".
The code of my component:
class MotosbicisScreen extends Component {
static navigationOptions = {
title: 'Motos y bicis',
};
constructor(props) {
super(props);
this.state = {
data: [],
};
}
componentDidMount() {
this.getData()
}
getData = async () => {
const url = 'https://url';
fetch(url).then((response) => response.json())
.then((responseJson) =>{
this.setState({
data:responseJson
})
})
}
renderRow = ({item}) => {
if (item.rubroClasificado == 9) {
if(item.imageJob == null) {
return(
<Card>
<CardItem>
<Body>
<Text>
{item.Texto}
</Text>
</Body>
</CardItem>
</Card>)
} else {
img = 'http://url/' + item.imagepath;
return(
<View style={styles.item}>
<Image
source={{ uri: img}}
width={Dimensions.get('window').width}
/>
</View>
)
}
}
}
render() {
return (
<View style={styles.container}>
<FlatList style={styles.container}
data={this.state.data}
renderItem={this.renderRow}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
}
}
Upvotes: 0
Views: 6525
Reputation: 1015
It is due to the fact that the Component is calling setState
when the component has been dismounted (you have navigated away from the page).
In the past a solution was to track if the component was mounted before setState was called, however this is bad practise.
The following article covers goes over your issue, the old bad practise, and one possible solution. (https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html)
Upvotes: 2