在 React Native 中运行来自不同类的函数

问题描述

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

I have a very simple issue with my react native application, I just want to execute a function everytime a button is clicked, it become complicated when there's separate classes and components.

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

I have 2 screens Dashboard and Search and 2 components Navbar and Results

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

In Dashboard I grab some user input and store it in selectedIngredients variableand with the Navbar component I execute a function located in the same file.

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

这个函数应该是魔法发生的地方(或者可能在 Search.js 屏幕中?)

This function is where should the magic happens (or maybe in Search.js screen?)

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

选择是 Search.js 屏幕

一切正常，我用预期的用户输入selectedIngredients移动到预期的屏幕，这是Search.js屏幕的第一次渲染.

Everything workin fine and I move to the expected screen with the expected user input selectedIngredients, this is the first render of Search.js screen.

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

之后我就卡住了，因为每次我点击我的 Navbar 上的 btn 并执行 switcher() 函数时，componentDidMount 不再运行，所以我必须通过点击另一个刷新页面按钮，这正是我想要避免的，因为它对用户体验不利，就像非常糟糕.我不想自动更新 Results 组件，而只是用一个函数更新它.

After that I'm stuck because everytime I click on the btn on my Navbar and execute the switcher() function, componentDidMount do not run anymore so I have to refresh the page by clicking on another button, this is exactly what I'm trying to avoid because it's bad for UX, like really bad. I am not looking to update Results component automatically but just update it with one function.

下面的代码不是很重要，它只显示了apiCall 函数和Results 组件的渲染，我不知道是否应该添加更多信息.请有人帮忙

The code below is not that important it only shows apiCall function and render of Results component, I don't know if I should put more information. Please someone help

  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() 但得到了未定义的错误，比如 hey react native！请将此数据发送到 Search.js 屏幕，当您到达时请执行 apiCall 函数，它位于那里，而不是这里.

My attempt was to add this.props.apiCall() in switcher function but got undefined error, something like hey react native! please send this data to Search.js screen and when you arrive please execute apiCall function, it's located there, not here.

推荐答案

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

Since you are using react navigation, in Search.js you have to bind didFocus listener, so the api will be called every time your screen is focused

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

这篇关于在 React Native 中运行来自不同类的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！