title: FlatList: "Tried to get frame for out of range index NaN" with useEffect + fetch
body: <p>I'm trying to render a FlatList with data coming from fetch. It worked before, but now it gives me the error &quot;&quot;Tried to get frame for out of range index NaN&quot;. I have an async function which await the fetch but my return (render) with FlatList is being called first. I've changed the fetch code to use <code>useCallback(async() =&gt; ....) </code> but it doesn't work. I can't put the fetch inside the useEffect because I need it elsewhere inside the component (refresh stuff). Here is my Component code:</p>
  <pre><code>function Home() {
      const [data, setData] = useState({});
  
      const getDataFromApi = useCallback(async() =&gt; {
          const u = await SecureStore.getItemAsync('user');
          const p = await SecureStore.getItemAsync('password');
  
          await fetch('https://arko.digital/wp-json/wp/v2/arko_alerta', {
          method: 'GET',
          headers: {
              'Authorization': 'Basic ' + Buffer.from(u + ':' + p).toString('base64'),
          }})
          .then((response) =&gt; response.json())
          .then((json) =&gt; {
              setData(json)
          })
          .catch((error) =&gt; {
              console.error(error);  
          });
      }, []);
  
      useEffect(() =&gt; {
          getDataFromApi();
      }, []);
  
      return (
          &lt;View style={{flex: 1}}&gt;
               &lt;FlatList
                  data={data}
                  refreshing={refreshing}
                  onRefresh={onRefresh}
                  keyExtractor={({ id }, index) =&gt; id}
                  ListHeaderComponent={&lt;Text style={commonStyles.bigHeader}&gt;Alertas&lt;/Text&gt;}
                  renderItem={({ item }) =&gt; (
                      &lt;Alerta 
                          title={item.content.rendered.split('&lt;/b&gt;')} 
                          content={item.content.rendered} 
                          time={item.date}
                          excerpt={item.excerpt.rendered}
                          hidden={true}
                      /&gt;
                  )}
              /&gt; 
          &lt;/View&gt;
      );
  }
  
  export default Home;
  
  </code></pre>
  <p>Using console.log i've noticed that the fetch INDEED return an array of objects in a couple of seconds. The problem is that my FlatList is not awaiting the fetch call. What am I doing wrong?
  I'm a newbie</p>
  <p>As I said, this worked before with a simple <code> async function getDataFromApi(){ ... }</code> outside useEffect and <code>getDataFromApi()</code> call inside useEffect.</p>
  <p>Thanks in advance</p>