Обновите дочерний компонент с другого экрана в реагировать родной

Question

Я пытался следовать учебному пособию для React.js, но получил undefined не является ошибкой объекта, у меня есть два разных экрана с отдельными классами, первый - панель инструментов, когда пользователь выбирает некоторые ингредиенты, затем я отправляю этот список на второй экранSearch.js все работает нормально, но нет способа обновить результаты, отображаемые на этом экране, потому что я вызываю API внутри componentDidMount, я пытался didUpdate ничего не менять!

Так что код на моем родительском экране выглядит так:

  switcher() {
    const { navigate } = this.props.navigation;
    navigate('Select', {passedData:this.state.selectedIngredients});
    this.refs.search.apicall()
  }

Затем на другом экране я получил эту функцию:

  apicall() {
    const { navigation } = this.props;
    const passedData = navigation.getParam('passedData', 'default value'); 
    let selectedIngredients = passedData;

      fetch(url)
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({
            data: responseJson.results,
            loading: false,
          });
        }) 
  }


    componentDidMount() { 
      this.apicall()
      };

Ошибка:

undefined не является объектом (оценивая this.refs.search.apicall)

Моя цель - удалить этот componentDidUpdate и создать функцию для обновления или обновления результатов, отображаемых на экране Search.js.Также возможность обрабатывать (запускать) функции из разных классов.Может кто-нибудь помочь с этим?