在 React Native 中的组件挂载之前调用带有参数的辅助函数

Posted 2023-02-23

【中文标题】在 React Native 中的组件挂载之前调用带有参数的辅助函数

【英文标题】：Helper Function with argument called before component mount in React Native

【发布时间】：2019-03-06 09:18:01

【问题描述】：

我正在通过在我的组件中调用一个简单的辅助函数来测试我的 express 服务器是否在 React Native 中运行。

这是辅助函数：

//Helper functions
  testFetch(msg) 
    console.log("Msg: ", msg);
    fetch("http://localhost:5000", 
      method: "GET",
      headers: 
        Accept: "application/json",
        "Content-Type": "application/json"
      
    )
      .then(response => response.json())
      .then(responseJson => 
        console.log("Express response: ", responseJson);
        this.setState( myText: responseJson );
      )
      .catch(error => 
        console.error("ERROR: Fetch (Entry.js, testFetch) ", error.message);
      );
  

我试过这样称呼它：

<Button title="Test Fetch" onPress=this.testFetch />
<Button title="Test Fetch" onPress=this.testFetch('Here I am') />

在第一种情况下，没有问题，当我点击按钮并正确运行时，组件渲染并且功能运行。

但是，如果我发送一个参数，例如第二种情况，辅助函数似乎在组件呈现之前执行，并且（如果我的快速服务器未启动和运行）在 catch 块中引发错误而不显示我的屏幕.

我错过了什么？如果我使用参数调用辅助函数（这不是我想要的），辅助函数似乎会在挂载时执行。我正在使用模拟器，所以不确定它是否有什么奇怪的地方？

理想情况下，当我检测到服务器不存在时，我想将屏幕更改为离线状态。在第一种情况下，我可以，在第二种情况下，一切似乎都在执行并崩溃。我知道我在这里遗漏了一些非常基本的东西！

谢谢！

【参考方案1】：

那是因为你立即在模板中调用了它。

替换

<Button title="Test Fetch" onPress=this.testFetch('Here I am') />

收件人

<Button title="Test Fetch" onPress=() => this.testFetch('Here I am') />

在此处了解更多信息https://reactjs.org/docs/faq-functions.html

【讨论】：

谢谢奇瑞尔！ - 我知道我遇到了一些基本错误 - 整个上午都在尝试在代码和互联网文章中追踪它，然后再发布到这里。您的回答解决了问题，并感谢文档链接 - 现在我更清楚了！ :)