Problem with Hook and AsyncStorage to load a FlatList - react-native

Question

I have 2 screens in my App one that has a form where the user stores the data that it fills in AsyncStorage and this screen that reads all the data saved in AsyncStorage and should show the data in a FlatList. The problem here is that nothing is rendered and the screen is blank. I dont know where the problem is located because if you read the code the console.log(productosData) actually returns in my command line exactly the same structure of result. So productosData is loaded without problem but for some reason this doesn't work.
export default function TestScreen () {
const [productosData, setproductosData] = useState([]);
const ItemView = ({item}) => {
return (
<View>
<Text>
{item}
</Text>
</View>
);
};
useEffect( () => {
async function cargarEnEstado() {
const keys = await AsyncStorage.getAllKeys();
const result = await AsyncStorage.multiGet(keys);
//result = [["a","b"],["c","d"],["e","f"],["g","h"]]
result.forEach(element => (setproductosData(productosData.push(element))));
console.log(productosData);
}
cargarEnEstado()
},[])
return (
<View style={styles.container}>
<FlatList
data={productosData}
renderItem={ItemView}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 2,
justifyContent: 'center',
alignItems: 'center',
}
});
So I maybe thought that the problem was my FlatList and then I decided to take my FlatList out and test the hook with a Text but when I use {productosData} inside the Text the screen shows a number that corresponds with the length of the first array of result. So in this case I see in the screen a 4 because result as well as productosData have this structure [["a","b"],["c","d"],["e","f"],["g","h"]] with the length of the first array being 4.
export default function TestScreen () {
const [productosData, setproductosData] = useState([]);
const ItemView = ({item}) => {
return (
<View>
<Text>
{item}
</Text>
</View>
);
};
useEffect( () => {
async function cargarEnEstado() {
const keys = await AsyncStorage.getAllKeys();
const result = await AsyncStorage.multiGet(keys);
//result = [["a","b"],["c","d"],["e","f"],["g","h"]]
result.forEach(element => (setproductosData(productosData.push(element))));
console.log(productosData);
}
cargarEnEstado()
},[])
return (
<View style={styles.container}>
<Text> {productosData} </Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 2,
justifyContent: 'center',
alignItems: 'center',
}
});
Any suggestions? Thank you in advance.

Answer 1

The reason nothing is being rendered is because element is an array of strings ['a','b'], if I understood correctly. Try to change your itemView to this
const ItemView = ({item}) => {
return (
<View>
<Text>
{item[0]+ ' , ' + item[1]}
</Text>
</View>
);
};
Also, your useEffect is not very clean. Note that state in React is immutable. By calling push on productosData, you're mutating the state. First, create a shallow copy of your state, then push your new objects into the copy. Only then you would update your state.
However, there is no reason to iterate your results, just spread them on the state, like this:
async function cargarEnEstado() {
const keys = await AsyncStorage.getAllKeys();
const result = await AsyncStorage.multiGet(keys);
//result = [["a","b"],["c","d"],["e","f"],["g","h"]]
setProductosData([...productosData, ...result])
console.log(productosData); // Also state is async, so this might not log the correct value
}