ReactJS: получить ответ, не возвращающийся на componentDidMount; Не удалось загрузить PDF - PullRequest
Новая
       8

ReactJS: получить ответ, не возвращающийся на componentDidMount; Не удалось загрузить PDF

0 голосов
/ 05 мая 2019

В ReactJS компонент не рендерится после получения ответа Fetch. Так что всегда вижу сообщение «Загрузка PDF ...» на экране

код componentDidMount указан ниже, 

    componentDidMount() {
        const {getData} = this.props;
        let data =  getData();
        console.log(data)      // printed empty while fetch in progress
        this.setState({pdfData : data})
        console.log(this.state.pdfData) // printed empty while fetch in progress
    }

После выборки значение getData (данные) не печатается. pdfData не установлен, так как этот компонент не выполняет повторный рендеринг. При этом значение массива печатается в getData ().

рендеринг возвращенных данных в формате pdf с использованием библиотеки activ-pdf 

    render() {
        return(
            <div style={{ width: 500 }}>
            <Document
                file={this.state.pdfData }
                onLoadSuccess={() => console.log("Success")}
                onLoadError = {(error) => console.log(error.message)}
            >
                <Page pageNumber={1} />
            </Document>
            </div>
        );

    }

getData указан ниже, 

export const getData = id => async (dispatch) => {
    let response;
    try {
        response = API_CALL
        console.log(response)                // PDF raw data printed
        let rawLength = response.length;
        let array = new Uint8Array(new ArrayBuffer(rawLength));
        for (let i=0; i < rawLength; i++){
            array[i] = response.charCodeAt(i);
        }
        console.log(array);                 //array value printed
        return array;
    } catch (error) {
        dispatch(setError(error.message));
        throw error;
    }
};

1 Ответ

2 голосов
/ 05 мая 2019

Поскольку ваша функция getData равна async, вам потребуется либо await результат в componentDidMount, либо действовать в соответствии с обещанием (при условии, что вы уже await выполняете свой вызов API).Например:

С ожиданием: 

async componentDidMount() {
    const { getData } = this.props;
    let data =  await getData(); // <-- Await the async here
    this.setState({ pdfData: data });
}

Или с обещанием: 

componentDidMount() {
    const { getData } = this.props;
    getData().then((data) => { // <-- Act on the promise result
      this.setState({ pdfData: data });
    });
}
...