React Native Fetch 在单击屏幕之前不会呈现响应答案

【问题标题】：React Native Fetch does not render response until after clicking screenReact Native Fetch 在单击屏幕之前不会呈现响应
【发布时间】：2017-12-05 15:30:21
【问题描述】：

所以我一直在构建一个使用 Fetch API 发出请求的应用。不幸的是，我认为 Facebook 文档中显示的代码（可能是？）不正确。

问题

启动应用时，Fetch 会调用 URL 以提取 JSON 数据。

componentDidMount(){
 return fetch(REQUEST_URL)
  .then((response) => response.json())
  .then((responseJson) => {
    this.setState({
      isLoading: false,
      data: JSON.stringify(responseJson)
    })
  })
  .catch((error) => {
    console.error(error);
  });
}

这类似于 Facebook 文档作为示例给出的代码。

问题是当我启动应用程序时，数据没有在渲染函数中渲染。

render() {

 if (this.state.isLoading) {
   return (
    <View style={{flex: 1, paddingTop: 20}}>
      <ActivityIndicator />
    </View>
  );
 } 

var data = this.state.data;
return this.renderData(data); 
}

至少，直到我点击/触摸屏幕之后它才会呈现。一旦我触摸屏幕，数据就会呈现。否则，它只会一直处于“加载”状态。

解决方案？

我记得在过去的某个时候，我必须将事件处理程序绑定到它们各自的控件（例如 this.handleClick = this.handleClick.bind(this)）

这让我想到：this 在 Promise 请求中在哪里？ this 指向哪里？

componentDidMount(){
 return fetch(REQUEST_URL)
  .then((response) => response.json())
  .then((responseJson) => {
    this.setState({ <--- **Where are you going?**
      isLoading: false,
      data: JSON.stringify(responseJson)
    })
  })

我在 responseJson 承诺中 console.logged “this”，它确实指向组件，但我不相信。由于它被隐藏在 Promise 中，我认为 this.setState 函数实际上无法设置组件的状态。

所以我在获取请求之前做了一个变量。

const that = this;
return fetch(REQUEST_URL)

.then((response) => response.json())
.then((responseJson) => {

  that.setState({

    isLoading: false,
    data: JSON.stringify(responseJson)
  })
})

现在我不是软件专家。在过去的几年里，我一直在自学这些东西，所以我的逻辑有一半时间是错误的。

所以如果我的推理是正确的还是不正确的，请告诉我！我所知道的是这对我有用；获取数据后，它会自动设置状态并重新加载，在呈现时向我显示 JSON 数据。

有什么想法吗？我完全离开这里了吗？我错过了什么吗？

【问题讨论】：

标签： javascript react-native fetch-api

【解决方案1】：

我看到了像你这样的问题。这与您的代码无关。是否在Remote JS debugging 模式下使用该应用程序？如果是这样，请禁用它。如果它不起作用，请尝试安装发布版本。

【讨论】：

叹息。天哪，该死的。好吧，我每天都获得更多的知识。刚刚测试了这一点，你是对的。调试模式导致它。
很高兴听到这个消息:)))。
@MeysamIzadmehr 如果你在汉密尔顿附近，我会给你买一三杯啤酒
OHHH MYYYY 天哪！我花了一周的时间在谷歌上搜索各种关键字，但没有运气。你救了我！我总是使用调试模式，这是根本原因。谢谢谢谢谢谢梅萨姆！
顺便说一句，如何解决这个问题，使其在调试模式下正常运行？我本地的另一个旧项目在调试模式下工作正常，但使用 useContext 和 React Navigation 5 的新项目遇到了这个问题。有什么想法吗？

【解决方案2】：

（代表 OP 发布）。

显然这是由于在调试模式下运行应用程序所致。不处于调试模式时，使用 this.setState 运行应用程序就可以正常工作。

【讨论】：