onclick ajaxレスポンスが到着して反応するときにhtmlを準備しますか？

Question

こんにちは私は新しくなりました。ユーザーがボタンをクリックすると、ajaxのリクエストが サーバーに送信され、受信したレスポンスに基づいて、htmlを準備して表示する必要があります。以下 は、それがasync: falseを使用してjqueryの中で解決することができますが、私はあなたが代わりにself.setState functionを使用する必要が

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

axios使用して解決する方法任意のアイデア ことを使用する必要はありません...それが機能していない私のコードですself.state assignmentの場合、Reactはコンポーネントの再レンダリングをトリガーしません。リアクトのdocumentationから

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

：

SETSTATEを（呼び出して、直接をthis.stateを変異させないでください）、その後、あなたが作った突然変異を交換することができます。それが不変であるかのようにthis.stateを扱う。次に、あなたのrender機能

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

であなたのobject useritemsが持っているものは何でもkeysでuser.titleを置き換えることができ

---

。