CODEWITHSUNDEEP
javascriptreact-native
toblKr
toblKr

Reputation: 151

React native call function every time directed to a screen

My app has a page to fetch and display data from API, a DrawerItem will direct the user to this page. In this page, there are three buttons, each of them fetch different data from the API when clicked, by default, the first button is clicked when the user is directed to this page every time. When the other buttons are clicked, the data on the screen will be cleared and fetched again.

In this ShowDataScreen.js

const ShowDataScreen = props => {
    const [records, setRecords] = useState([]);

    // call this every time when this screen is focused
    useFocusEffect(
        React.useCallback(()=>{
            const fetchData = async(type) => {...fetch data and setRecords};
            fetchData('1'); // get type 1 data
        })
    )

    // call this when buttons are clicked
    const fetchData = async(type) => {
        if(type=='1'){ setTypeOneSelected(true); //set other false }
        if(type=='2'){ setTypeTwoSelected(true); //set other false }
        if(type=='3'){ setTypeThreeSelected(true); //set other false }

        // get data from api and update the screen by setRecords
        setRecords(result)
    }

    return(
        <View>
            <TouchableOpacity style={typeOneSelected?styles.selected: styles.notSelected} title="datatype1" onPress={fetchData('1')}> 1 </TouchableOpacity>
            <TouchableOpacity style={typeTwoSelected?styles.selected: styles.notSelected} title="datatype2" onPress={fetchData('2')}> 2 </TouchableOpacity>
            <TouchableOpacity style={typeThreeSelected?styles.selected: styles.notSelected} title="datatype3" onPress={fetchData('3')}> 3 </TouchableOpacity>
            <FlatList data={records}>
            // fetched data shown here
            </FlatList>
        </View>
        )    
}

Every time the user go to this page should see the type 1 data and style. If Other buttons are clicked should update the screen accordingly. How do I update the data and style correctly?

Upvotes: 1

Views: 1858

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

As per your comment it might be the useeffect hook running continuously. You can check this sample for a working version. I've mocked the async call using a common api. This works according to the requirement.

function ProfileScreen() {
  const [records, setRecords] = React.useState('');
  const [type, setType] = React.useState(1);

  useFocusEffect(
    React.useCallback(() => {
      console.log('Screen was focused');
      fetchData(1);
    }, [])
  );

  const fetchData = async (type) => {
    console.log(type);
    const data = await fetch('https://jsonplaceholder.typicode.com/todos/' + type);
    const json = await data.json();
    setRecords(json);
    setType(type);
  };

  return (
    <View>
      <TouchableOpacity
        style={type === 1 ? styles.selected : styles.notSelected}
        title="datatype1"
        onPress={() => fetchData(1)}>
        <Text>1</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={type === 2 ? styles.selected : styles.notSelected}
        title="datatype2"
        onPress={() => fetchData(2)}>
        <Text>2</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={type === 3 ? styles.selected : styles.notSelected}
        title="datatype3"
        onPress={() => fetchData(3)}>
        <Text>3</Text>
      </TouchableOpacity>
      <Text>{JSON.stringify(records)}</Text>
      <Text>{type}</Text>
    </View>
  );
}

Upvotes: 1

Related Questions