在单击屏幕之后，React Native Fetch不会呈现响应 [英] React Native Fetch does not render response until after clicking screen

问题描述

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

问题

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

  componentDidMount（ ）{
返回获取（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}}> 
< ActivityIndi​​cator /> 
< / View> 
）; 
} 
 
 var data = this.state.data; 
返回this.renderData（数据）; 
} 
  

至少在之后才会呈现我点击/触摸屏幕。触摸屏幕后，数据呈现。否则，它只会处于永久加载状态。

解决方案？

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

<这让我想到：承诺请求中这个在哪里？ this 指向哪里？

  componentDidMount（）{
 return fetch（REQUEST_URL） 
 .then（（response）=> response.json（））
 .then（（responseJson）=> {
 this.setState（{< --- ** Where你要去吗？** 
 isLoading：false，
 data：JSON.stringify（responseJson）
}）
}）
  

我在responseJson的promise中记录了this，它确实指向了组件，但我不相信。由于它被置于promise的内部，我认为this.setState函数实际上不能设置组件的状态。

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

  const that = this; 
返回获取（REQUEST_URL）
 
 .then（（response）=> response.json（））
 .then（（responseJson）=> {
 
 that.setState（{
 
 isLoading：false，
 data：JSON.stringify（responseJson）
}）
}）
  

现在我不是软件专家。在过去的几年里，我一直在教自己这些东西，所以我的逻辑关闭了一半。

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

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

解决方案

我看到了像你这样的问题。这不是关于你的代码。是否在远程JS调试模式下使用该应用程序？如果是这样，请将其禁用。如果它不起作用，请尝试安装发行版。

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.

Problem

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);
  });
}

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.

Solution?

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)

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)
    })
  })

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.

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?

解决方案

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屋！