Question

我试图在反应原生中使用fetch（method：GET）从api url中检索json响应。

constructor(props){
    super(props);
    this.state = {jsonData: {}};
  }

componentWillMount() {
    console.log("inside componentWillMount");

    fetch('http://localhost:3000/listData')
        .then((response) => {console.log('response: '); return response.json();})
        .then((responseJson) => {console.log('responseData: '+JSON.stringify(responseJson)); return this.setState({jsonData: responseJson});})
        .catch((err) => {console.log(err)});
  }

api以这种格式返回数据：

{
        object: 'list',
        data: [...]
}

api url通过curl工作。我还尝试通过安装node-fetch来运行代码独立的fetch部分，并正确打印了responseData。但是，在react-native中，它不会在当时的fetch函数中打印任何控制台日志语句，也不会设置jsonData的状态。

你能告诉我可能是什么问题吗？我一直在谷歌搜索很长一段时间，试图找出可能是什么问题。

修改我尝试了异步提取，如下所示：

componentWillMount() {
    console.log("inside componentWillMount");
    this.fetchData().done();
}
async fetchData(){
    const response = await fetch('http://localhost:3000/listData')
    const json = await response.json();
    const data = json.url;

    console.log('data'+url);
}

尽管如此，同样的问题仍然存在。我无法理解为什么它与facebook网址有效，而不是我的本地api网址

解
感谢Michael Cheng指出我正确的方向。我找到了这个链接： https://github.com/react-community/create-react-native-app/issues/154。

代码修复： 我刚用我的ipv4地址替换了localhost http://myserveripv4address:3000/listData并且它有效。

版本：

react-native@0.50.4

设备： Android

Answer 1

一些想法：

如果是iOS，则需要远程网址为https或禁用此安全功能;
您可能需要将fetch（）标记为异步函数;
尝试使用无承诺进行异步提取。

无法在React-Native中使用fetch（url）

1 个答案: