在 React Native 中挂载组件之前调用参数的帮助程序函数

Question

我正在测试我的快速服务器是否在我的组件中调用一个简单的帮助程序函数在 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