React Native Fetch 直到点击屏幕后才呈现响应 [英] React Native Fetch does not render response until after clicking screen

问题描述

所以我一直在构建一个使用 Fetch API 发出请求的应用程序.不幸的是，我认为 Facebook 文档中显示的代码(可能是?)不正确.

So I've been building an app that uses the Fetch API to make a request. Unfortunately, I think the code shown in the Facebook docs are (may be?) incorrect.

问题

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

When starting the app, Fetch makes a call to a URL to pull JSON data.

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 文档给出的示例代码.

This is similar to the code that Facebook docs give as an example.

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

The problem is that when I start the app, the data doesn't render in the render function.

render() {

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

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

至少，它不会在我点击/触摸屏幕后之后渲染.一旦我触摸屏幕，数据就会呈现.否则，它只会一直处于加载"状态.

At least, it doesn't render until after I click/touch the screen. Once I touch the screen, the data renders. Otherwise, it just stays in a perpetual "loading" state.

解决方案?

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

I remembered that sometime in the past, I had to bind event handlers to their respective controls (this.handleClick = this.handleClick.bind(this), for example)

这让我开始思考:promise 请求中的 this 在哪里?this 指向哪里?

And that got me thinking: Where is this in the promise request? Where does this point to?

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

我在 responseJson 承诺中控制台.记录了this"，它确实指向组件，但我不相信.由于它被隐藏在 promise 中，我认为 this.setState 函数实际上无法设置组件的状态.

I console.logged "this" within the responseJson promise, and it does point to the component, but I'm not convinced. With it being buried inside of the promise, I don't think the this.setState function is actually able to set the component's State.

所以我在获取请求之前创建了一个变量.

So I made a variable before the fetch request.

const that = this;
return fetch(REQUEST_URL)

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

  that.setState({

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

现在我不是软件大师.在过去的几年里，我一直在自学这些东西，所以我的逻辑有一半是错误的.

Now I'm not a software guru. I've been teaching myself this stuff for the last couple of years, so my logic is off half the time.

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

So if my reasoning is correct or incorrect, please let me know! What I do know is that this is working for me; once the data is fetched, it automatically sets the state and reloads, showing me the JSON data when rendered.

有什么想法吗?我完全不在这儿吗?我错过了什么吗?

Any thoughts? Am I completely off here? Am I missing anything?

推荐答案

我看到了与您类似的问题.这与您的代码无关.是否在远程JS调试模式下使用该应用程序?如果是这样，请禁用它.如果它不起作用，请尝试安装发布版本.

I saw a problem like yours. It's not about your code. Are using the app in the Remote JS debugging mode? If so, disable it. If it didn't work, try to install a release version.

这篇关于React Native Fetch 直到点击屏幕后才呈现响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！