Question

我试图使用React Native从本地主机获取数据。

我有一个使用MySQL创建的数据库。该数据库名为test，该表命名为users。它包含以下行：picture
我在以下脚本中创建连接：

var express = require('express')
var app = express()

var mysql = require('mysql')
var bodyParser = require('body-parser')

app.use(bodyParser.json({type:'application/json'}))
app.use(bodyParser.urlencoded({extended:true}))

//create the connection
var con = mysql.createConnection({
    host : 'localhost',
    user:'root',
    password:'',
    database:'test'
})

//create a listen port number
var server = app.listen(4546, function(){
    var host = server.address().address
    var port = server.address().port
})

//connect to the server
con.connect(function(error){
    if(error) console.log(error)
    else console.log('Connected ! ')
})

app.get('/', function(req, res){
    con.query('SELECT * FROM users', function(error, rows, fields){
        if(error) console.log(error)
        else {
            //displaying the lines
            console.log(rows)
            res.send(rows)
        }

    })
})

现在当我进入localhost：4546时，我看到以下内容： picture就是我在上面的脚本中要求的用户表中的所有行。
问题：当我尝试使用以下React Native脚本（请参见下文）来获取此数据时，在WELCOME和Bye Bye之间我什么也没得到。

import React, { Component } from 'react';
import { View, Text,FlatList } from 'react-native';

export default class ButtonBasics extends Component {

  state = {
    data:[]
  }

  componentWillMount(){
    this.fetchData()
  }

  fetchData = async() => {
    const response = await fetch('https://192.168.1.14:4546/')
    const json = await response.json();
    this.setState({data: json.results})
  }

  render() {
    return (
      <View >
          <Text>WELCOME !</Text>
          <FlatList
            data={this.state.data}
            keyExtractor={(x, i) => i}
            renderItem={({item}) => <Text>{item.FirstName}</Text>}
          />
          <Text>Bye Bye !</Text>

      </View>
    );
  }
}

我遵循了以下教程，并正确地完成了所有操作，但仍然无法正常工作。

其他信息：

  fetchData = async() => {
    try{
    const response = await fetch('https://192.168.1.14:4546/')
    const json = await response.json();
    this.setState({data: json})
    console.log(data)
    } catch(e){
      console.log(e);
    }
  }

这将输出以下错误：error

这是我在iphone上获得的输出（未在模拟器上运行）：iphone screen

我是新来的，所以任何提示都会有所帮助：）

解决方案：我在使用访存时将https更改为http，并且可以使用。

Answer 1

好，因此您的数组为空，并且您会拒绝Promise，请尝试以下操作：

  fetchData = async() => {
    const response = await fetch('https://192.168.1.14:4546/')
    .then(res => res.json())
    .then(data => { 
     this.setState({data: data})
     console.log(data) // just a check for yourself
     }   
    .catch(err => console.log(err))  
  }

Answer 2

我看到您正在使用HTTPS的react-native提取，建议您在开发过程中使用http而不是https，因为react-native不允许您使用自签名证书（我看不到带有cert的代码，所以也不能使用HTTPS），而无需进行冗长而繁琐的配置。如果为http://localhost:$someport，则您的提取将成功运行。

最简单的方法：将您的https更改为http

更危险的方式：如果您坚持要使用它，请查看如何使用自发行的证书进行获取。

这是一个常见问题：React-native fetch() from https server with self-signed certificate

希望有帮助。

Answer 3

您可以尝试记录响应吗？

const { data: response } = await fetch('https://192.168.1.14:4546/')

也许您会得到这样的数据。

获取数据本地主机反应本地

3 个答案: