Javascript 当ajax响应到达并在react中呈现时，单击“准备html”？

嘿，我是新来的，我的要求是，当用户点击一个按钮时，会向 服务器和基于收到的响应，我必须准备html并显示它。 下面是我的代码，它不工作。。可以在jquery中使用

async:false

来解决这个问题，但我不必使用它 知道如何使用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;

从“React”导入React；
从“axios”导入axios
类UserItems扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户项：“”
}
} 
prepareHtmlOnAjaxResponse（）{
var user_item=this.state.useritem
//html准备在这里完成
返回已准备好的HTML；
}
getDatFromServeronclick（）{
//从服务器获取用户数据是在这个函数中完成的
//当接收到数据时，数据以一种状态存储
var self=这个；
var promise=axios.get（“http://localhost:4000/user/1/items.json")
承诺。然后（功能（响应）{
self.setState（{useritem:response.data.items}）
self.prepareHtmlOnAjaxResponse（）//准备html
})
log（“首先执行并返回null”）
}
render（）{
var result=this.getDatFromServeronclick（）//获取未定义的值必须调用onclick
返回(
{result}/结果未定义
);
}
}
导出默认用户项；

您必须使用

self.setState函数

而不是

self.state赋值

，否则React不会触发组件的重新启动

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

来自React的：

切勿直接对this.state进行变异，因为之后调用setState（）可能会替换您进行的变异。将this.state视为不可变的

---

然后在

渲染

函数中

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

this.getDatFromServeronclick（）}>{this.state.useritems.map（user=>user.title）}

---

您可以将

user.title

替换为

key

您的

object useritems

所拥有的任何内容。

我已经更新了代码，但是如何从

prepareHtmlOnAjaxResponse

函数显示html查看我更新的答案或创建JSFIDLE，我可以更正它。请将useritem重命名为useritems