ax ios не возвращает массив ReactJS - PullRequest
Новая
       2

ax ios не возвращает массив ReactJS

1 голос
/ 10 февраля 2020

Я беру топор ios, чтобы получить json сервер с массивом

присоединенный json массив

http://my-json-server.typicode.com/jee4nc/myjsonserver/lista

Проблема в том, что я хочу назначить этот список объектов другому компоненту через его свойства 

import React, { Component } from 'react';
import axios from 'axios';
import CardsGrid from "../Pages/CardsGrid"

class Axios_cards extends Component {

    constructor(props) {

        super(props)
        this.state = {
            courses : []
        }      
    }

    componentDidMount() {
        axios.get('http://my-json-server.typicode.com/jee4nc/myjsonserver/lista')
        .then(response => this.setState({
                courses: response.data
            }))
    }
    render() {
        const {courses} = this.state
        return <CardsGrid courses={courses}/
    }
}

export default Axios_cards;

Именно здесь 

render() {
        const {courses} = this.state
        return <CardsGrid courses={courses}/>
    }

Компонент, который получает список объектов в качестве реквизита, не получает массив, так как я сделал проверку для его проверки Я присоединяю компонент, которому я назначаю массив, через реквизиты 

const CardsGrid = ({courses}) => (
    <div className="ed-grid m-grid-3">
            {
                Array.isArray(courses) ?
            courses.map( e => 
                <Cards 
                id={e.id} 
                title={e.title} 
                description={e.description}
                image={e.image}
                price={e.price}
                key={e.id}  
                />) : null
            }
        </div>
)

1 Ответ

1 голос
/ 10 февраля 2020

Проблема здесь axios.get('http://my-json-server.typicode.com/jee4nc/myjsonserver/lista'). Скорее всего, вы открываете свое приложение через защищенное (https) соединение (т. Е. https://my-app). Но в коде вы пытаетесь получить небезопасный (http) ресурс. Это называется смешанным контентом и блокируется браузерами. Вы можете прочитать больше об этом здесь

Так что, чтобы решить, просто используйте конечную точку https. Ваш сервер поддерживает запросы https. 

axios.get('https://my-json-server.typicode.com/jee4nc/myjsonserver/lista')

Работает образец

...