当ajax响应到达时onclick准备html并在反应中呈现？

Question

嘿，我是新手，我的要求是，当用户单击按钮时，将触发 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;

Answer 1

你必须使用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 的 documentation：

永远不要直接改变 this.state，因为之后调用 setState() 可能会替换你所做的改变。将 this.state 视为不可变的。

---

然后在你的render 函数中

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

您可以将user.title 替换为您的object useritems 拥有的任何keys。