Question

我想使用reac-excel-workbook组件，并从请求到服务器检索excel文件中生成的数据。用我写的代码我得到了错误＆＃34;数据未定义＆＃34;在请求完成之前我的代码如下：

import React, { Component } from 'react';
import Workbook from 'react-excel-workbook'

class SynthesisPage extends Component {

  constructor(props) {
    super(props);    
    this.getDataForExport = this.getDataForExport.bind(this);
  }

  getDataForExport() {
    let me = this;
    let exportData = [];
    fetch(me.proxyUrl+'/satisfaction-data-list-export?').then(
      function(response) {
        if (response.status !== 200) {
          return;
        }
        response.json().then(function(data) {                    
          return data.items;           
        });
      }
    )    
  }

  render() {    
    return (   
      <div>
        <h1>Page de Synthèse</h1>
        <Workbook element={<Button><Glyphicon glyph="export" style={{'color':'white'}}/></Button>}>
          <Workbook.Sheet data={this.getDataForExport} name="Sheet A">
          <Workbook.Column label="Foo" value="foo"/>        
          </Workbook.Sheet>      
        </Workbook>
      </div>         
    )
  }
}

export default SynthesisPage

有人可以帮帮我吗？我提前谢谢你。

Answer 1

试试这个解决方案：

<Workbook.Sheet data={this.getDataForExport.bind(this)} name="Sheet A">

Answer 2

这里的问题是该组件在执行函数之前生成工作表。但他可能会这样尝试：

从'react'导入React，{Component}; 从'react-excel-workbook'导入工作簿

    class SynthesisPage extends Component {

      constructor(props) {
        super(props);  
        this.state = {
          getDataForExport = []
        }
      }

      getDataForExport() {
        let me = this;
        let exportData = [];
        fetch(me.proxyUrl+'/satisfaction-data-list-export?').then(
          function(response) {
            if (response.status !== 200) {
              return;
            }
            response.json().then(function(data) {                    
              return data.items;           
            });
          }
        )    
      }

      componentDidMount(){
        this.getDataForExport(); // this.getDataForExport.bind(this);
      }

      render() {    
        return (   
          <div>
            <h1>Page de Synthèse</h1>
            <Workbook element={<Button><Glyphicon glyph="export" style={{'color':'white'}}/></Button>}>
              <Workbook.Sheet data={this.state.getDataForExport} name="Sheet A">
              <Workbook.Column label="Foo" value="foo"/>        
              </Workbook.Sheet>      
            </Workbook>
          </div>         
        )
      }
    }

    export default SynthesisPage

使用fetch获取react-excel-workbook组件的数据

2 个答案: