Получить данные localhost реагировать на родной

Question

Я пытаюсь получить данные с помощью React Native с моего локального хоста.

1. У меня есть база данных, которую я создал с помощью MySQL. База данных называется test, а таблица - пользователями. Он содержит следующие строки: картинка

2. Я создаю соединения в следующем скрипте:

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

    })
})

Теперь, когда я go на 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>
    );
  }
}

Я выполнил следующие уроки и все сделал правильно, но все равно не работает.

• https://www.youtube.com/watch?v=IuYo009yc8w
• https://www.youtube.com/watch?v=MY_DEKLQiOU&list=PLWrTy7mdWLT2GXLCZynIcGNu7006uHT1x&index=2

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ:

  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 экран

Я новичок в этом, поэтому любые советы будут полезны:)

РЕШЕНИЕ : я изменил https в http при использовании fetch, и это работает.

Answer 1

Я вижу, что вы используете реакционную нативную выборку с HTTPS, я предложу вам использовать http вместо https во время разработки, потому что реагирующий-нативный не позволит вам использовать самоподписанный сертификат (я не вижу ваш код с сертификатом, так что вы не можете использовать HTTPS также) без долгих, утомительных настроек. Ваша выборка будет работать успешно, если она http://localhost:$someport.

Самый простой способ: измените https на http

Более сложный способ: если вы настаиваете на его использовании, пожалуйста, проверьте Как получить сам выданный сертификат.

Это распространенная проблема: React-native fetch () с https-сервера с самозаверяющим сертификатом

Надеюсь, это поможет.

Answer 2

Можете ли вы попытаться войти ответ?

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

возможно, вы получаете такие данные.

Answer 3

Хорошо, ваш массив пуст и вы получаете отказ от 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))  
  }