Как передать асинхронное состояние в подпорки дочернего компонента? - PullRequest
Новая
       30

Как передать асинхронное состояние в подпорки дочернего компонента?

1 голос
/ 05 июля 2019

Я новичок, чтобы реагировать, и я пытаюсь извлечь данные из API и передать данные дочернему компоненту.Однако я передал данные в состояние на моем родительском компоненте, когда я передаю их дочернему компоненту в качестве подпорки, он записывается как пустой массив.Я уверен, что есть кое-что простое, что я пропускаю, но я не знаю что, мой код ниже

РОДИТЕЛЬНЫЙ КОМПОНЕНТ 

import React, {Component} from 'react';
import Child from '../src/child';
import './App.css';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
          properties: []
        }
    }

    getData = () => {
        fetch('url')
        .then(response => {
            return response.text()
        })
        .then(xml => {
            return new DOMParser().parseFromString(xml, "application/xml")
        })
        .then(data => {
            const propList = data.getElementsByTagName("propertyname");
            const latitude = data.getElementsByTagName("latitude");
            const longitude = data.getElementsByTagName("longitude");

            var allProps = [];

            for (let i=0; i<propList.length; i++) { 
                allProps.push({
                    name: propList[i].textContent,
                    lat: parseFloat(latitude[i].textContent), 
                    lng: parseFloat(longitude[i].textContent)
                });
            }

            this.setState({properties: allProps});
        });
    }

    componentDidMount = () => this.getData();

    render () {
        return (
            <div>
                <Child data={this.state.properties} />
            </div>
        )
    }
}

export default App;

ДЕТСКИЙ КОМПОНЕНТ 

import React, {Component} from 'react';

class Child extends Component {
    initChild = () => {
        console.log(this.props.data); // returns empty array

        const properties = this.props.data.map(property => [property.name, property.lat, property.lng]);
    }

    componentDidMount = () => this.initChild();

    render () {
        return (
            <div>Test</div>
        )
    }
}

export default Child;

Ответы [ 2 ]

2 голосов
/ 05 июля 2019

Измените componentDidMount в дочернем элементе на componentDidUpdate.

Метод жизненного цикла componentDidMount вызывается только один раз при запуске.Принимая во внимание, что метод жизненного цикла componentDidUpdate вызывается всякий раз, когда происходит изменение в состоянии приложения.Поскольку вызовы API являются асинхронными, функция initChild () уже вызывается один раз, прежде чем результаты вызова API передаются дочернему элементу.

0 голосов
/ 05 июля 2019

Вы можете использовать условный рендеринг 

import React, {Component} from 'react';

class Child extends Component {
    initChild = () => {
        if(this.props.data){
          const properties = this.props.data.map(property => [property.name, property.lat, property.lng]);
        }        
    }

    componentDidMount = () => this.initChild();

    render () {
        return (
            <div>Test</div>
        )
    }
}

export default Child;
...