Question

我的react native应用程序有一个非常简单的问题，我只想在每次单击按钮时执行一个函数，当有单独的类和组件时，它变得很复杂。

我有2个屏幕Dashboard和Search以及2个组件Navbar和Results

在仪表板中，我获取了一些用户输入并将其存储在selectedIngredients变量中并使用Navbar组件执行位于同一文件中的函数。

<Navbar handle={() => this.switcher()} />

此功能应该在哪里发生（或在Search.js屏幕上显示）

  switcher() {
    const { navigate } = this.props.navigation;
    navigate('Select', {passedData:this.state.selectedIngredients });
    Alert.alert("send data to Search.js")
  }

选择是Search.js屏幕

一切正常，我使用预期的用户输入selectedIngredients移至预期的屏幕，这是Search.js屏幕的第一个渲染。

 componentDidMount() {
    this.apiCall();
    Alert.alert("did mount search.js")
  }

此后，我陷入了困境，因为每次我在Navbar上单击btn并执行switcher（）函数时，componentDidMount不再运行，因此我必须通过单击另一个按钮来刷新页面，这这正是我要避免的事情，因为它对UX不利，就像真的不好。我不希望自动更新Results组件，而只是使用一个功能来更新它。

下面的代码不是很重要，它仅显示apiCall的功能和Results组件的呈现，我不知道是否应该放置更多信息。请有人帮助

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

  componentDidMount() {
    this.apiCall();
    Alert.alert("did mount search.js")
  }

  render() {
    return (
      <View>

      <Navbar title="Results" />
      <Results results={this.state.data} /> 

    </View>
    );
  }
}

我的尝试是在切换器功能中添加this.props.apiCall()，但出现未定义的错误，就像嘿，本机反应一样！请将此数据发送到Search.js屏幕，到达时请执行apiCall函数，它位于此处，而不是此处。

Answer 1

由于您正在使用react navigation，因此在 Search.js 中，您必须绑定didFocus侦听器，因此每次屏幕聚焦时都会调用api

componentDidMount() {
  const { navigation } = this.props;
  navigation.addListener( 'didFocus', () => this.apiCall() );
  this.apiCall();
  Alert.alert("did mount search.js")
}

在React Native中从其他类运行函数

1 个答案: