如何将响应表单Axios分派发送到reactjs中的类组件？ 对于react-pdf

编程问答 2022-06-10

问题描述

我正在使用React-PDF生成PDF，我希望从发帖请求到mapdispatchToProps中的API的响应中获取pdf数据。我的代码是

const mapdispatchToProps = (dispatch) => {
  return {
    onSave: (data) => {
      Agent.API.add(data)
        .then((response) => {
          dispatch({ type: "SAVE" });
        })
        .catch((err) => {
          console.log(err);
        });
    },}

和我生成PDF的功能类似

class Component extends React.Component {

generatePdfDocument = async (documentData) => {
    this.props.onSave(documentData)
    const blob = await pdf(<InvoiceTemplate data={dataFromrequest} />).toBlob();
    saveAs(blob,"test.pdf");
  };

  render() {
       return  <Button onClick={() => this.generatePdfDocument(data)} </Button>
  }
}

在generatePdfDocument中，我调用发生请求的函数，然后将响应从原先的响应传递给<Template>作为道具。我怎么做？ PS-documentData来自redux存储。

解决方法

您希望将此请求Agent.API.add(data)的结果传递到您的<InvoiceTemplate/>组件。

您需要将请求响应存储在redux存储中，或从onSave函数返回。

从onSave函数返回： 

onSave: (data) => {
      return Agent.API.add(data)
        .then((response) => {
          dispatch({ type: "SAVE" });
          return response; 
        })
        .catch((err) => {
          console.log(err);
        });
    },

然后将此数据传递给您的组件

generatePdfDocument = async (documentData) => {
    const dataFromRequest = await this.props.onSave(documentData)
    const blob = await pdf(<InvoiceTemplate data={dataFromRequest} />).toBlob();
    ...
}

使用redux存储区

  1. 使用减速器将响应保存在商店中
  2. 将状态映射到道具https://react-redux.js.org/using-react-redux/connect-mapstate

此处有完整的教程：https://react-redux.js.org/introduction/basic-tutorial

axiosjavascriptreactjsreactjs