尝试在 react-native 中通过 url 加载 JSON 但没有得到正确的响应答案

【问题标题】：Trying to load JSON via url in react-native but not getting correct response尝试在 react-native 中通过 url 加载 JSON 但没有得到正确的响应
【发布时间】：2017-08-15 08:07:14
【问题描述】：

getData() {
return fetch("http://bitcfeedcms.rf.gd/script.php")
  .then(response => {
    console.log(response);
    response.json();
  })
  .then(responseJson => {
    this.setState({ data: responseJson });
  })
  .catch(error => {
    console.error(error);
  });

}

我还尝试将 ?l=1 设置为“ bitcfeedcms.rf.gd/script.php?l=1 ”。主要的 json 文件是“bitcfeedcms.rf.gd/feed_data.json”。所以我也尝试了“http://bitcfeedcms.rf.gd/feed_data.json?l=1”，但没有任何改变

我现在必须做些什么来获取 json 数据并在我的应用程序中使用它...请帮助

【问题讨论】：

你看到console.log了吗？
是的...我查过了。
响应日志在这里...bitcfeedcms.rf.gd/1.png
我认为您的问题在于 php 脚本。您是否尝试向 Postman 提出请求？响应以 HTML 格式返回。
邮递员给我 html 作为响应....请参阅这里邮递员 bitcfeedcms.rf.gd/postman%20error.png 的响应

标签： javascript php json react-native

【解决方案1】：

您使用的箭头功能错误。而不是这个：

fetch("http://bitcfeedcms.rf.gd/script.php")
  .then(response => {
    console.log(response);
    response.json();
  })
  .then(responseJson => {
    this.setState({ data: responseJson });
  })

您应该返回response.json()

fetch("http://bitcfeedcms.rf.gd/script.php")
   .then(response => {
     console.log(response);
     return response.json();
   })
   .then(responseJson => {
     this.setState({ data: responseJson });
   })

这样你就可以在下一个then联系responseJson。

另外，如果您的应用程序抱怨 fetch() network request failed 可能是关于 Info.plist 或 Manifest 配置错误。看到这个topic。

对于 iOS，您可以使用此 https 虚拟 json url 尝试相同的请求： https://jsonplaceholder.typicode.com/posts/1

【讨论】：

bitcfeedcms.rf.gd/1.png 这里是响应数据。它没有提供正确的数据....
是的，我尝试使用您的代码然后出现（屏幕截图）结果。
bitcfeedcms.rf.gd/feed_data.json?l=1 试试这个。控制台记录then 并告诉我输出。
bitcfeedcms.rf.gd/up1.png bitcfeedcms.rf.gd/up2.png 正如你所说...我做到了，结果在屏幕截图中
查看@MattyK14写的问题的评论

【解决方案2】：

http://bitcfeedcms.rf.gd/script.php，此链接返回多组 JSON。

([{"FeedTitle":"Debotos","FeedDescription":"第一次 Feed 测试....."},{"FeedTitle":"Akash","FeedDescription":"创建一个名为 \" 的氏族Khulna Sparkers\""},{"FeedTitle":"Ripon","FeedDescription":"我的兄弟和我最亲密的人之一"}])

试试这个。 . .

getData() {
 fetch("http://bitcfeedcms.rf.gd/script.php")
  .then(response => {
    console.log(response);
    response.json();
  })
  .then(responseJson => {
        var length = responseJson.length;
        for (var a = 0; a<length;a++) {
            var FeedTitle = responseJson[a].FeedTitle; //<-variable from your response json
            var FeedDescription = responseJson[a].FeedDescription; //<-from your response json
            console.log(FeedTitle);
            console.log(FeedDescription);
        }
  })
  .catch(error => {
    console.error(error);
  });
}

【讨论】：

响应日志在这里 bitcfeedcms.rf.gd/1.png 其他 url（用于 script.php）正在响应与那个相同的内容
看看这一行 {"FeedTitle":"Akash","FeedDescription":"Creating a clan named \"Khulna Sparkers\""} 我猜你的 Json 格式有误。 json 数据必须是这样的 {"var":"value"}
但在离线时（通过目录路径），当我尝试加载该 json 文件时，它工作得很好......所以 json 格式可能没有错，它是一个对象数组

【解决方案3】：

试试 axios

npm install --save axios

state = {data:[]};
    componentWillMount() {
                 axios.get('http://bitcfeedcms.rf.gd/script.php')
                 .then(response =>this.setState({data:response.data}));
    }

【讨论】：