2017-08-11 63 views
0

我寫了下面的代碼裏面使用getInitialState愛可信:陣營:axios.get和承諾

var Player = createReactClass({ 
    readDataFromServer: function() { 
     return axios.get("**** url address ****") 
     .then(res => {    
      return {name: res[name]} 
     }); 
    }, 
    render: function() { 
     return this.readDataFromServer().then((res) => { 
     return (<input value={res.name} type="text"/>) 
     } 
    } 
} 

我期望我會得到一個與輸入文本中。 「渲染」函數返回一個只在承諾解決,然後返回 但是,儘管如此,我只是得到一個錯誤說:

Player.render():有效的做出反應元素(或空)必須退回。您可能返回了未定義的數組或其他無效對象。

順便說一句,如果我改變readDataFromServer功能:

我與文「約翰」內的輸入框。

回答

1

您可能必須對這些異步axios調用使用react-redux。當你啓動應用程序時,你的getInitialState函數沒有返回值,所以當它首次呈現給DOM時,它有一個空值。如果您要console.log返回的值,您可能會在控制檯中看到它,但是,由於第一次渲染時該值爲null,因此不會顯示返回的值。看看反應,終極版,它管理您的數據存儲,一旦你從Axios公司調用的返回值,更新了Redux值,並在

render: function() { return (<input value={this.redux.name} type="text"/>) }

呼叫呈現了Redux值來代替,這將一旦從服務器接收到響應,就自動更新DOM。

請隨時查看React和Express應用程序的樣板:https://github.com/rjzheng/REWBoilerplate.git。查看/ app文件夾並查看如何設置縮減器。

+1

感謝您的回答,但我編輯了它。 – CrazySynthax