1

ちょっと私は新しいのですが、私の要件は、ユーザーがボタンをクリックすると ajax get リクエストがサーバーに送信され、受信した応答に基づいて html を準備して表示する必要があるということです。以下は私のコードです。動作していません..使用してjqueryで解決できますが、axiosをasync: false使用して解決する方法を使用する必要はありません

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のドキュメントから：

後で setState() を呼び出すと、作成した変更が置き換えられる可能性があるため、this.state を直接変更しないでください。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 に答える