array returned from promise wont render in react native

Question

I have been trying to work this out for a VERY long time, but I just cannot. I do not understand why an array, whose contents I console.log, and clearly see it is not empty, and has the elements I want in it, is not being rendered on the page when I run my react native app. My code is below, please help guys

import React, { useEffect } from "react";
import AsyncStorage from "@react-native-community/async-storage";
import { View, Text } from "react-native";

export default function PaymentsScreen() {

  const [renderedData, setRenderedData] = React.useState(new Array<string>());

  const getData = async () => {
    try {
      const keys = await AsyncStorage.getAllKeys();
      const result = await AsyncStorage.multiGet(keys);
      return result;
    } catch (e) {
      console.log(e);
    }
  };

  async function parseData() {
    const payments = await getData();

    if (payments) {

        const res = payments
        .filter((e: any[]) => e[1] && e.includes('{'))
        .map((e: any[]) => e[1]);
        
        setRenderedData(res);
    }

    return renderedData;
  }
  
  React.useEffect(() => {
    parseData()
  });
 
  return (

    <View>

      {renderedData.map(data => <Text>{data}</Text> )}

    </View>
    
  );
}

Leonardo Lima · Answer 1 · 2020-07-29T13:00:52.677

1

dont push directly the data on renderedData

you should use setRenderedData

React.useEffect(() => {
   async function fetchData() {
      try {
        const keys = await AsyncStorage.getAllKeys();
        const result = await AsyncStorage.multiGet(keys);
        const res = result
           .filter((e: any[]) => e[1] && e.includes('{'))
           .map((e: any[]) => e[1]);
        setRenderedData(res);
      } catch (e) {
        console.log(e);
      }
   }
   fetchData();
}, []);

edited Jul 29 '20 at 13:00

answered Jul 29 '20 at 12:39

Leonardo Lima

474
5
12

1

Also you should call `parseData` inside `useEffect` hook. Or you'll get an infinite fetch-update loop. – UjinT34 Jul 29 '20 at 12:54
are you sure this works? I am getting an infinite loop – Henry Jul 29 '20 at 12:57
dont forget to refactor with useEffect. Editing to explain better – Leonardo Lima Jul 29 '20 at 12:57
I updated my code, thanks for your suggestion but it did not work. – Henry Jul 29 '20 at 13:03
may be result need some logic to parse. saw that you are waiting for an array – Leonardo Lima Jul 29 '20 at 13:06
Yes, I am waiting for the promise to resolve but it should not be this complicated – Henry Jul 29 '20 at 13:08
debug the `result`, and paste here, i will try help – Leonardo Lima Jul 29 '20 at 13:11
I actually ran console.log(renderedData) in that block of code for useEffect, and it returned [], I have no idea why – Henry Jul 29 '20 at 13:14
`const result = await AsyncStorage.multiGet(keys);` and `console.log(result)` – Leonardo Lima Jul 29 '20 at 13:16
result is perfect, it is exactly what i want, so that is not the problem – Henry Jul 29 '20 at 13:22
hmm, maybe the problem is on filter: `.filter((e: any[]) => e[1] && e[1].includes('{'))` – Leonardo Lima Jul 29 '20 at 13:26

score 0 · Answer 2 · answered Jul 29 '20 at 12:42

0

Inside your render function, since the data you are trying to render is an array, you need to loop through them to render each as text node.

 return (
      <View>
          { renderedData.map((item, key)=>(
            <Text key={key}> { item } </Text>)
          )}
      </View>
        );

answered Jul 29 '20 at 12:42

Vijay122

884
8
12

I updated my code, thanks for your suggestion but it did not work. – Henry Jul 29 '20 at 13:03

D10S · Answer 3 · 2020-07-29T13:08:23.833

0

First of all, it is bad practive to change the state directly. State should be considered as immutabe (see explantion).

so change

renderedData.push(eachPayment[1]);

to

setRenderedData([...renderedData, eachPayment[1]);

Now, to the problem you are having, try to change

<Text> {renderedData} </Text>

to

{renderedData.map(data => <Text>{data}</Text> )}

try also change useEffect like this:

React.useEffect(() => {
    if(renderedData.length === 0) {
        parseData();
    }
},[]);

edited Jul 29 '20 at 13:08

answered Jul 29 '20 at 12:45

D10S

1,468
2
7
13

I updated my code, thanks for your suggestion but it did not work. – Henry Jul 29 '20 at 13:03
Edited my answer. added useEffect edition. worse trying – D10S Jul 29 '20 at 13:10
I actually ran console.log(renderedData) in that block of code for useEffect, and it returned [], I have no idea why – Henry Jul 29 '20 at 13:14
it should be []. did you try to console log res? – D10S Jul 29 '20 at 13:19
res is [] as well – Henry Jul 29 '20 at 13:20
inside "parseData"? if so, then you know where your problem is (hint: ...filter...map...) – D10S Jul 29 '20 at 13:24
glad it helped, my pleasure – D10S Jul 29 '20 at 13:28

array returned from promise wont render in react native

3 Answers3