A problem with a trivial react native code with hooks

Question

Update:

Problem 2. is solved (thanks to @NikolayNovikov reply) by replacing "setResources({ resources: response.data })" with "setResources(response.data)".

Problem 1. I cannot reproduce it...

Description of the problem:

The following trivial example is fetching data from jsonplaceholder.typicode.com, and, since there are 100 'posts' and 200 'todos', it is supposed to display 100 and 200 when you click on these buttons.

For some reason that I cannot find (embarrassing, I know...), there are two problems:

When I click on the 'posts' button, useEffect is called twice (once with 'todos' and once with 'posts', and when I click on the 'todos' button it is not called at all.
resource.length is not rendered

Any idea what is wrong?

App.js:

import React, { useState } from 'react'; import { View, TouchableOpacity, Text, StyleSheet } from 'react-native'; import { ResourceList } from './components/ResourceList';

console.warn('In App.js: Disabling yellowbox warning in genymotion'); console.disableYellowBox = true;

export const App = () => {

  const [resource, setResource] = useState('todos');

  return (
    <View style={{ flex: 1, alignItems: 'center', marginTop: 100 }}>
      <Text style={{ fontSize: 20, fontWeight: '500' }}>
        The Application has been loaded!
      </Text>
      <View style={{ flexDirection: 'row', marginTop: 100,
        alignItems: 'center', justifyContent: 'center' }}>
        <TouchableOpacity onPress={() => setResource('posts')}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>
              Posts
            </Text>
          </View>
        </TouchableOpacity>
        <View style={{ width: 20 }} />
        <TouchableOpacity onPress={() => setResource('todos')}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>
              Todos
            </Text>
          </View>
        </TouchableOpacity>
      </View>
      <ResourceList resource={resource} />
    </View>
  );
}

const styles = StyleSheet.create({
  buttonText: {
    color: 'black',
    fontSize: 20
  },
  button: {
    backgroundColor: '#a8a',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 5,
    paddingHorizontal: 10,
    borderRadius: 2
  }
});

ResourceList.js:

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

// export const ResourceList = (props) => {
export const ResourceList = ({ resource }) => { // restructured props

  const [resources, setResources ] = useState([]);

  const fetchResource = async(resource) => {
    console.log('+++ ResourceList/fetchResource calling axios. path:',
      `https://jsonplaceholder.typicode.com/${resource}`);
    const response = await axios.get(`https://jsonplaceholder.typicode.com/${resource}`);
    console.log(response);
    setResources({ resources: response.data })
  }

  useEffect(() => {
    console.log('--- ResourceList/useEffect. resource: ', resource);
    fetchResource(resource);
  }, [resource]);

  return (
    <View style={{ flex: 1, alignItems: 'center', marginTop: 100 }}>
      <Text style={{ fontSize: 20, fontWeight: '500' }}>
        {resources.length}
      </Text>
    </View>
  );
}

Nikolai Novikov Nikolai Novikov · Accepted Answer · 2019-12-19T20:27:29

In you ResourceList.js component setResources should be different, please try this:

setResources(response.data)