Реагируйте, импортируйте внешние json, а не локальные - PullRequest
Новая
       4

Реагируйте, импортируйте внешние json, а не локальные

0 голосов
/ 20 февраля 2020

У меня есть класс, который хорошо работает, когда у меня есть локальный файл json. Но это не работает, когда json на внешнем источнике. 

import React, { Component } from 'react'
import Components from "../components/components.js";
import datas from "../components/data.json";
import axios from 'axios';

const data2 = datas.results[0];

export default class HomePage extends React.Component {

    state = {
        json: []
    }

    componentWillMount() {
        axios.get(`http://external_json_url`)
            .then(res => {
                const json = res.data;
                this.setState({ json });
                const data = this.state.json.results[0];
                console.log(data);
                console.log(data2); // get the same result in the console
            })
    }

    render() {
        return (
            <div>
                {data2.Composant.map(block => Components(block))}
            </div>

        )
    }
}

, если я заменяю {data2.Composant.map(block => Components(block))} на {data.Composant.map(block => Components(block))} Я получаю некоторую ошибку: Строка 28:18: «данные» не определены нет-UNDEF

1 Ответ

0 голосов
/ 20 февраля 2020

Попробуйте использовать состояния. 

import React, { Component } from 'react';
import Components from "../components/components.js";
import datas from "../components/data.json";
import axios from 'axios';

const data2 = datas.results[0];

export default class HomePage extends React.Component {

state = {
    json: [],
    data:{}
}

componentWillMount() {
    axios.get(`http://external_json_url`)
        .then(res => {
            const json = res.data;
            this.setState({ json });
            const data = this.state.json.results[0];
            this.setState({data});
            console.log(data2); // get the same result in the console
        })
}

render() {
    return (
        <div>
            {this.state.data.Composant.map(block => Components(block))}
        </div>

    )
}
}
...