当ajax响应到达时，Onclick准备HTML并在react中呈现

onclick prepare html when ajax response arrivers and render in react?

本文关键字：并在 HTML react 准备 Onclick 响应 ajax 应到达      更新时间：2023-09-26

嘿，我是新的反应，我的要求是，当用户点击一个按钮ajax get请求被触发到服务器和基于收到的响应，我必须准备的html和显示它。下面是我的代码，它不工作…它可以通过使用async: false在jquery中解决，但我不必使用它知道如何使用axios

来解决吗?
import React from "react";
import axios from "axios"
class UserItems extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    useritem: ''
  }
} 
prepareHtmlOnAjaxResponse(){
  var user_item = this.state.useritem
  // html prepation done here
  return preparedHtml;
}

getDatFromServeronclick() {
  // getting user data from server is done in this function 
  // when data is receieved it is stored in a state
    var self = this;
    var promise = axios.get("http://localhost:4000/user/1/items.json")
    promise.then(function (response) {
    self.setState({ useritem: response.data.items })
     self.prepareHtmlOnAjaxResponse()  // prepare html 
    })
console.log("executing first and returning null")
}

render() {
   var result = this.getDatFromServeronclick()  // getting undefined value this has to be called onclick
    return (
       <div> 
        {result}  / result is undefined
      </div>
    );
}

 }
export default UserItems;

你必须使用self.setState function而不是self.state assignment，否则React不会触发组件的渲染。

var promise = axios.get("http://localhost:4000/user/1/items.json")
    promise.then(function (response) {
    self.setState({ useritems: response.data.items })
})

来自React的文档:

永远不要改变这个。state直接，因为之后调用setState()可能会替换您所做的更改。对待这个问题。状态，就好像它是不可变的。

然后在render函数

<button onClick={() => this.getDatFromServeronclick() }> {this.state.useritems.map(user => user.title)} </button>

您可以将user.title替换为object useritems的keys。

相关文章：