在函数里面返回response.data .then callback |爱可信

时间:2017-05-28 20:21:05

标签: reactjs redux axios

是否可以在.then回调中返回一个函数?

我想做这样的事情:

axios.post('url_api/endpoint')
  .then(function(response){

     renderAdmissionReponse(){
       <div>Success response.data</div>
     }

  })

稍后在像这样的组件中呈现它:&#34;

<div className="row spacer">
 {this.renderAdmissionReponse()}
</div>

有可能吗?

1 个答案:

答案 0 :(得分:3)

我实际上可以理解你的需要,但是,上面的代码是错误的!

您想要的是:使用axios成功加载数据后,数据将在页面上正确呈现。如果是这样,您可以使用以下方式:

constructor(props) {
    // ...
    this.state = ({
        admissionResponse: [],
        // your other state variables here
    })
}

renderAdmissionReponse = (data) => {
    this.setState({
        admissionResponse: data,
    });
}

// ... You can put this inside `ComponentDidMount()`, then just call the function to setState with returned data
axios.post('url_api/endpoint')
    .then((response) => {

        this.renderAdmissionReponse(response.data);

    })
// ...

render() {
    return (
        <div className="row spacer">
            <div>{this.state.admissionResponse.authorizationId}</div>
            <div>{this.state.admissionResponse.authorizationNum}</div>
            {this.state.admissionResponse.lineItems.map((line) =>{
              return(
                <div>{line.id}</div>
                <div>{line.lineItemNumber}</div>
              )
            })}  
        </div>
    );
}

请同时检查你的response.data结构,然后检索正确的密钥,上面的代码我只是试着解释一下如何正确反应如何异步加载数据并在那之后在页面上呈现。如果有的话,请在这里发布一些错误,谢谢。