Duplicate asynchronous component twice render the last - reactjs

Question

I create the same component (Recipes) or Screen twice, sending different properties.
<Recipes setRecipes = {this.setRecipes} id="1" />
<Quantity setQuantity = {this.setQuantity} />
<Recipes setRecipes = {this.setRecipes2} id="2" />
<Quantity setQuantity = {this.setQuantity} />
The properties-functions are the following. Only states change.
setRecipes = (recipe) => {
this.setState({recipe:recipe})
}
setRecipes2 = (recipe2) => {
this.setState({recipe2:recipe2})
}
In mty component called Recipes, I get my local database (I use pouchdb), my recipes and products asicronically.
import React, { Component } from 'react';
import { Text, View, TouchableOpacity, ScrollView } from 'react-native';
import style from './Styles/styleNew';
import PouchDB from 'pouchdb-react-native';
PouchDB.plugin(require('pouchdb-find'));
const gThis = null;
const db = new PouchDB('X')
export default class Recipes extends Component {
constructor(props) {
super(props);
gThis = this;
this.state = {
setRecipes: this.props.setRecipes,
id: this.props.id,
recipeID: null,
options: [ ],
};
}
getRecipes() {
let data = []
db.find({
selector: {
type: {
"$eq": this.state.id,
},
owner: {
"$in": ['user']
},
},
}).then(function (recipes) {
recipes = recipes.docs
for (let i = 0; i < recipes.length; i++) {
recipe = recipes[i]
let current = {
id: recipe._id,
name: recipe.name,
recipe: recipe,
}
data.push(current)
}
gThis.setState({ options: data })
}).catch(function (err) {
console.warn(err.toString())
});
}
componentDidMount() {
this.getRecipes()
}
handleBackPress = () => {
this.props.navigation.goBack();
}
defineRecipe(recipe, index) {
this.setState({ recipeID: recipe._id });
this.state.setRecipes(recipe)
}
render() {
return (
<View style={{ flex: 1 }}>
<Text style={style.listText}>RECIPES {this.state.id} </Text>
<ScrollView style={style.listScroll}>
{this.state.options.length >0 &&
this.state.options.map((item, index) => {
key = index + '-' + this.state.id
//key = new Date().toISOString()
console.log(key)
return (
<TouchableOpacity
style={this.state.recipeID === item.id ? style.listOptionSelected : style.listOption}
onPress={() => { this.defineRecipe(item.recipe, index);}}
key={key} >
<Text style={style.listOptionText}>{item.name}</Text>
</TouchableOpacity>
);
})
}
</ScrollView>
</View>
);
}
}
But the second Screen Recipe is rendered twice.
Render 1
Render 2
As you can see, the content is replaced.

Answer 1

I think it might have something to do with you gThis which I assume is a global this?
A better way to try and access this inside your class members is to either use lexical arrow functions in your class like this:
getRecipes = () => {
// implementation
}
Or bind your class members to this in the constructor as follows
constructor(props) {
super(props);
gThis = this;
this.state = {
id: this.props.id,
recipeID: null,
options: [ ],
};
this.getRecipes = this.getRecipes.bind(this);
this.defineRecipe = this.defineRecipe.bind(this);
}
On a different node, you have babel transpiling your ES6 code from as far as I can see.
I would strongly recommend replacing your for loops with es6 variants such as a map or forEach for readability
const options = recipes.map(recipe => {
const { _id: id, name } = recipe;
data.push({
id,
name,
recipe,
});
});
this.setState({ options });