0

У меня есть Store, App и компонент, который генерирует PDF-документ на основании данных, которые я вытаскиваю из API сервиса

Проблема появляется, когда данные поступают в компонент, вылетает ошибка:

TypeError: Cannot read property 'state' of undefined

Store.js

import { observable, action } from 'mobx'

class Store {

  @observable dd //Вот он, не теряем его

  constructor() {
    this.dd = {
      content: [
        {
          text: 'Topvisor',
          style: 'header'
        }
      ]
    }
  }

  @action('get Topvisor data')
  getTopvisorData() {
    fetch("https://api.topvisor.ru/v2/json/get/positions_2/history", {
      method: 'POST',
      headers: {...},
      body: JSON.stringify({...})
    })
    .then(response => {
      return response.json();
     })
    .then(data => {
      this.dd.content.push({ul: data.result.keywords.name}) //Тут добавили данные
      console.log(this.dd);
    });
  }
}

export default Store

App.js

import React, { Component } from 'react';
import PDFGenerate from './components/PDFGenerate/PDFGenerate';
import { observer } from 'mobx-react';
import Store from './store'

@observer
class App extends Component {
  constructor() {
    super()
    this.state = new Store
    this.state.getTopvisorData()
  }
  render() {
    return (
      <div className="App">
        <PDFGenerate data = {this.state.dd}/> //Тут передали данные
      </div>
    );
  }
}

export default App;

PDFGenerate.js

import React, { Component } from 'react';
import pdfMake from "pdfmake/build/pdfmake";
import { observer } from 'mobx-react';

@observer
class PDFGenerate extends Component {
  constructor(props) {
    super(props);
    this.state = this.props.data // Тут их получили
  }
  render() {
    return (
      <div className="PDFGenerate">
        <button onClick={this.generatePDF} type="button">Давай сюда отчет</button> // Тут вызвали
      </div>
    );
  }
  generatePDF() {
    pdfMake.createPdf(this.state).open() // А тут ошибка
  }
}

export default PDFGenerate;

2 ответа 2

3

Функция generatePDF() не знает что такое this. Используйте либо "стрелочные" функции:

generatePDF = () => {
  pdfMake.createPdf(this.state).open()
}

либо выполните привязку контекста в конструкторе:

this.generatePDF = this.generatePDF.bind(this)

также вернее будет не this.state = this.props.data, а this.state = props.data

2
  • Тогда вылетает ошибка Unrecognized document structure: {} 27 авг 2018 в 15:59
  • Вы проверяли что передаете в функцию? похоже что там пустой объект
    – mufdvr
    27 авг 2018 в 16:09
2

Дополню первый ответ @mufdvr по комментарию "Тогда вылетает ошибка Unrecognized document structure: {}". Дело в том, что в вашей структуре content - это массив. Но, когда вы делаете объект observable, то массив преобразовывается в объект, который уже не является классическим массивом:

P.S

Нашел один момент - это особенность pdfMake - внутри createPdf должен лежать объект со свойством content

Due to limitations of native arrays in ES5 observable.array will create a faux-array (array-like object) instead of a real array. https://mobx.js.org/refguide/array.html

И если pdfMake не умеет работать с таким объектом (не работал с ним, не могу сказать точно), то будет ошибка. Передавать напрямую observable объект ему нельзя.

Как выход, можно создать "геттер" в вашем Store, который будет возвращать "классический" массив:

@computed get contentArray() {
    return this.dd.content.slice();
}

и вызывать:

<PDFGenerate data = {this.state}/>

а в компоненте

pdfMake.createPdf({content: this.props.data.contentArray}).open()
4
  • через геттер передается массив из Proxy и внутри отгенеренного pdf получается пусто. Это из-за того, что передается Proxy или как? 28 авг 2018 в 7:28
  • точно не могу сказать. не работал с pdfMake. Лучше всего включить отладчик в браузере и смотреть по шагам, что приходит на каком этапе 28 авг 2018 в 7:54
  • ну дело в том, что если поместить объект внутрь компонента, статический текст будет нормально отображен 28 авг 2018 в 7:59
  • Нашел один момент - это особенность pdfMake - внутри createPdf должен лежать объект со свойством content 28 авг 2018 в 8:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.