在函数内部返回 response.data .then 回调 |爱讯

Question

是否可以在.then 回调中返回函数？

我想做这样的事情：

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

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

  })

稍后在这样的组件中渲染它：“

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

有可能吗？

Answer 1

其实我能理解你的需要，但是你上面的代码是错误的！

你想要的是：使用 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 结构然后检索正确的键，上面的代码我只是试图解释正确的反应如何异步加载数据并在此之后在页面上呈现的方式。如有错误，请在此处发布，谢谢。