Асинхронная загрузка данных с реактивной избыточностью сохраняется - PullRequest
Новая
       43

Асинхронная загрузка данных с реактивной избыточностью сохраняется

0 голосов
/ 13 февраля 2019

У меня проблема с асинхронными данными.У меня есть компонент, который обрабатывает данные, загруженные с сервера 

  import React, {Component} from 'react';
import {Col, Row} from 'antd';
import {persiststore} from "../../../../store";

class Step2Question extends Component {
    constructor(props) {
        super(props);
    }
componentDidMount() {
    const questions = [];
    if (this.props.questions.length === 0) {
        this.props.callApi('GET', '/api/products/' + this.props.selectedProduct, null, this.props.token, (data) => {
            // this.setState({ranks: data.data});
            data.data.productQuestionModels.forEach(ele => {
                this.props.callApi('GET', '/api/questions/' + ele.questionId, null, this.props.token, (data) => {
                    questions.push(data.data);
                })
            })
        }, ...[, , ,], () => {
            this.props.addQuestions(questions);
            persiststore.flush().then(() => {
                this.props.disableNext(false);

            })
            persiststore.persist();
        }, 'questions');
    }
}

render() {

    return (
        <Row>
            {this.props.questions.map((ele, idx) => (
                <Col key={idx} style={{paddingTop: '30px'}} md={12} xs={12} sm={12}>
                    <strong>Question {idx + 1}: {ele.content}</strong>
                </Col>))}
        </Row>
    );
}

}

Я не знаю, как заставить вопросы загружаться из сервера рендеринга.Если я использую опцию {pure: false} в методе подключения, то будут отображаться некоторые элементы, а не все.Пожалуйста, помогите мне большое спасибо

1 Ответ

0 голосов
/ 13 февраля 2019

Вот как я обычно использую React.Если у меня есть компонент, который я хочу получить данные, я устанавливаю переменную состояния уровня массива (массив) для хранения этих данных.Затем у меня есть функция уровня приложения, которая обновляет этот массив на основе переданного массива (используя setState ()).Затем, когда я вызываю компонент, я отправляю ему массив уровня приложения, а также функцию уровня приложения.Внутри подкомпонента я получаю данные в локальный массив, затем вызываю переданную функцию с этим массивом.В моем коде рендеринга подкомпонента я ссылаюсь на массив, переданный с уровня приложения (не локальный массив, который я заполнил).

(примечание: в приведенном ниже псевдокоде я использую ..., чтобы указать ваш существующийздесь будет идти код или другой код и т. д.)

Уровень приложения 

    state = {showQuestions: []}
    ...
    updateQuestions = (newQuestions) => {
        this.setState({showQuestions: newQuestions})
    }
    ...
    // then when you render (I'll assume the name of your component 
    // is Questions)
    <Questions 
        questionData={this.state.showQuestions}
        updatefunc={this.updateQuestions}
    />

Файл подкомпонента (внутри имеющегося кодавыше) 

...
componentDidMount() {
    // use your code above, I'm assuming you are putting data 
    // into the questions array
    ...
    // after you've got the questions array all set up with all data
    this.props.updatefunc(questions)
    ...
}
...
// now down in the render of your Questions component
render() {
    return(
        ...
        this.props.questionData.map(... <your other code))
        ...
}

В качестве примечания, в используемом мной коде React я не выполняю функцию конструктора.Синтаксис this.props. доступен без этого.Так что, возможно, я нахожусь в другой версии React, чем вы.Также я не знаком с элементом <'row'>, который вы показываете в своем render().Поэтому я не знаю, означают ли эти вещи мои приведенные выше примеры, которые будут работать как ожидалось, или нет.Я рекомендую разбрасывать операторы console.log(), чтобы вы могли видеть, какие данные передаются, куда и т. Д. Удачи.

...