如何通過AJAX在具有迴流的商店中獲得初始狀態

Question

最近我一直在研究React和Reflux。 我被卡住的部分是我無法在Reflux的商店中獲得AJAX的初始狀態。 我試過的只是在Store.js的getInitialState函數中調用ajax（$。getJSON），使用AJAX響應（JSON）設置初始狀態，並確定狀態是什麼。 我期望從AJAX調用得到的輸出將是JSON數組列表，但實際輸出將是'undefined'

那麼如何在具有迴流的Store中使用AJAX獲取初始狀態？

的代碼是這樣的......

// in store.js 
getInitialState: function() { 
    $.getJSON('/sample').done(function(result){ 
    this.list = result; 
    }); 
    return this.list; 
} 

// in sampleApp.jsx 
mixins: [Reflux.connect(Store, "list")], 

    render() { 
    console.log(this.state.list); 
    // I expected this output would be JSON lists, but the actual output will be undefined. 

    return(); 
    } 

Answer 1

有許多與此代碼的問題：

getInitialState: function() { 
    $.getJSON('/sample').done(function(result){ 
    this.list = result; 
    }); 
    return this.list; 
} 

首先，你回來this.list Ajax請求回來與前數據。這實際上意味着您要從該函數返回undefined。第二個問題是您在Ajax回調中使用this，該回調不會指向迴流存儲。您需要使用箭頭功能和ES6轉換器。

但無論如何你不應該在getInitialState中做一個Ajax請求。你要找的東西是這樣的：

var MyStore = Reflux.createStore({ 
    getInitialState: function() { 
    return { 
     list: [] 
    } 
    }, 
    init: function() { 
    var self = this; 
    $.getJSON('/sample').done(function (result) { 
     self.trigger({list: result}); 
    }); 
    } 
});