1

嘿，我是新手，我的要求是，当用户单击按钮时，将向服务器触发 ajax get 请求，并且根据收到的响应，我必须准备 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;
4

1 回答 1

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 的文档：

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

然后在你的render功能

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

你可以用你拥有user.title的任何东西来代替。keysobject useritems

于 2016-09-09T10:44:48.017 回答