Question

我正在通过在组件中调用一个简单的辅助函数来测试我的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块中而没有显示我的屏幕

我想念什么？如果我使用一个参数（不是我想要的）调用辅助函数，则该函数似乎在安装时执行。我正在使用模拟器，所以不确定是否有点奇怪？

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

谢谢！

Answer 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

了解更多信息

在React Native组件安装之前调用带有参数的Helper函数

1 个答案: