Как повторно отрисовать компоненты в react-native?

Я новичок в разработке, ориентированной на реакцию, уже потратил 2 дня на эту проблему. Я не умею печатать, но могу объяснить проблему с исходным кодом.

Текущий сценарий:

1. Главный экран приложения: есть значок док-станции для закрепления конкретной карты. После нажатия на значок док-станции эта карта была сохранена в базе данных в виде списка для док-станции. работает нормально.

2. На главном экране есть ссылка, такая как «Переключиться на список док-станций»: когда я нажимаю на список док-станции, он перенаправляется на экран списка док-станции, он отлично работает.

3. На экране DockList есть 4 карты, такие как Card a, View docklist, Card c, Card d.

Шаги, выполняемые на этом экране:

1. componentDidMount()
   • On componentDidMount(), I am fetching "ID" from AsyncStorage(Local Storage) and set that value into state. I am passing this Id into api param.
   • Вызов API сервера (this.viewDockList ())

Область проблемы:

• Согласно моим знаниям и исследованиям, componentDidMount () вызывается только один раз после рендеринга.
• Мне нужно в любое время вызывать api, когда я нажимаю «Просмотреть список DockList».
• Here, when I refresh the app following scenario is working

  1. Главный экран- ›Я подключил карту к главному экрану

  2. На главном экране - ›Нажмите« Перейти к списку док-станции »-› Перейти на экран док-станции

  3. На экране док-станции - ›Нажмите« Просмотреть список док-станций »-› Впервые вызывается api, и данные отображаются в соответствии с моими требованиями.

  4. Теперь я возвращаюсь на главный экран и снова устанавливаю карту, перехожу к экрану док-станции и щелкаю по списку док-станции в это время, Api не вызывает, только вызывает render (). Здесь мне нужно снова вызвать API и получить последние данные с сервера. Я попытался вызвать принудительное обновление при нажатии на детали док-станции Просмотр, API вызывается, но список не обновляется.

Вот мой исходный код:

componentDidMount() {
    console.log("ComponentDidmount called")

    AsyncStorage.getItem('Id').then(value => {
        if (value !== null) {
            this.setState({ profileId: value })
        }
    })

    this.getDockedData();
}

 getDockedData = async () => {

    this.showLoading();

    console.log("API CALLED=====")

    try {
        let axiosConfig = {
            headers: {
                'Access-Control-Allow-Origin': '*'
            },
            params: {
                pId: this.state.profileId,
            }
        }

        axios.get('apiendpoint', axiosConfig)
            .then((res) => {

                this.setState({
                    sourceData: [...res.data.filter((item) => { if (!item.s_updated && !item.b_updated && !item.p_updated) return item })],

                });
                console.log("Data from dock api====", this.state.sourceData)
                this.hideLoading();
            })
            .catch((err) => {
                console.log("AXIOS ERROR WHILE GETTING DOCK DATA: ", err);
                this.hideLoading();
            })
    }

    catch (error) {
        console.log("ERROR======", error);
        this.hideLoading();
    }
}

   forceUpdate() {
    console.log("Force update called===")
    this.getDockedData();
  }   

//On render I am calling component 
 <Dockcomp  description="Lorum ipsum" onButtonPress={() => this.props.navigation.navigate('dockdetailscreen', { item: sourceData, type: "docked", UpdateUI: this.UpdateUI }, this.forceUpdate())} />

Ожидаемый ответ:

1. Главный экран- ›Я подключил карту к главному экрану
2. На главном экране - ›Нажмите« Перейти к списку док-станции »-› Перейти на экран док-станции
3. На экране док-станции - ›Нажмите« Просмотр списка док-станций »-› Каждый раз, когда я нажимаю на «Просмотр списка док-станций», должен вызываться api. Сейчас он вызывается только один раз, потому что я использовал componentDidMount ()

Огромное спасибо заранее! Я действительно борюсь с этой проблемой последние 2 дня.