Реагировать на нативную функцию вызова каждый раз, когда она направлена ​​на экран

Question

В моем приложении есть страница для извлечения и отображения данных из API, DrawerItem направляет пользователя на эту страницу. На этой странице есть три кнопки, каждая из которых при нажатии извлекает разные данные из API, по умолчанию, когда пользователь перенаправляется на эту страницу каждый раз, по умолчанию нажимается первая кнопка. При нажатии других кнопок данные на экране будут очищены и получены снова.

В этом 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>
        )    
}

Каждый раз, когда пользователь go на этой странице должен см. данные и стиль типа 1. При нажатии других кнопок экран должен обновиться соответствующим образом. Как правильно обновить данные и стиль?

Answer 1

Согласно вашему комментарию, это может быть хук useeffect, работающий постоянно. Вы можете проверить этот образец на наличие рабочей версии. Я издевался над вызовом asyn c, используя общий api. Это работает в соответствии с требованиями.

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>
  );
}