反應本機加載構造函數之外的數據

我剛剛得到react-native的掛件，但真的陷入了方案＃2和＃3。這可能是一小時的晚，但我不能只是得到listview重新填充場景的構造函數之外...反應本機加載構造函數之外的數據

注：這是一個簡單的例子，最終會成爲一個更高級的數據加載

方案1中綁定控制器

這個偉大的工程：

export default class HomeView extends Component { 
    constructor(props) 
    { 
    super(props); 

    const ds = new ListView.DataSource(
     { 
     rowHasChanged: (r1,r2) => r1 !== r2 
     } 
    ); 

    var data = [ 
     {"id":1, "desc": "Some description of a request", "group": "Today"}, 
     {"id":2, "desc": "Another description of a request", "group": "Today"} 
     ]; 

    this.state = { 
     loaded: false, 
     data: data, 
     dataSource: ds.cloneWithRows(data) 
    };

方案＃ 2 - 呼叫加載方法

該子集從構造函數開始。當我直接調用方法時，它會產生「在未安裝的組件上調用setState是一個問題」的錯誤。不夠公平，但它執行所有方法並運行兩個控制檯語句。我試圖在＃3中解決這個問題。

var data = [ 
     {"id":1, "desc": "Some description of a request", "group": "Today"}, 
     {"id":2, "desc": "Another description of a request", "group": "Today"} 
     ]; 

    this.state = { 
     loaded: false, 
     data: data, 
     dataSource: ds 
    }; 

    console.log("About to load data"); 
    this.loadData(); 
    } //end ctor 

    loadData() { 
    console.log("Data count is: " + this.state.data.length); 

    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(this.state.data), 
     loaded  : true 
    }); 
    }

情景3 - 使用綁定

使用bind（）方法LoadData只留下空白屏幕，而不出現在日誌報表，所以它在該區的另一種方式。代碼從構造函數中開始...

var data = [ 
    {"id":1, "desc": "Some description of a request", "group": "Today"}, 
    {"id":2, "desc": "Another description of a request", "group": "Today"} 
    ]; 

this.state = { 
    loaded: false, 
    data: data, 
    dataSource: ds 
}; 

    console.log("About to load data"); 
    this.loadData = this.loadData.bind(this); 
} //end ctor 

loadData() { 
    console.log("Data count is: " + this.state.data.length); 

    this.setState({ 
    dataSource: this.state.dataSource.cloneWithRows(this.state.data), 
    loaded  : true 
    }); 
}

如何使這項工作？

來源

2016-12-30 Brian Mains

爲什麼你不想使用場景1？ –

您也可以通過調用componentWillMount（）函數中的loadData（）方法來獲得相同的行爲。 –

@coderhacker因爲它最終會成爲一個Ajax請求或本地存儲數據加載，我不希望我所有的邏輯都在構造函數中......我使用es6類，它看起來componentDidMount不是受支持的API方法。 .. –

使用const關鍵字和聲明類

const data = [ 
     {"id":1, "desc": "Some description of a request", "group": "Today"}, 
     {"id":2, "desc": "Another description of a request", "group": "Today"} 
     ];

來源

2016-12-30 04:46:01

儘管它不總是靜態數據，但這只是提供最終將成爲更復雜場景的示例的快速方法。 –

之外，我想我嘗試了前面，但顯然我沒有正確地使用它。現場有一些內置的方法，這些方法可用：componentWillMount()運行被稱爲前render()方法，組件安裝之前，和componentDidMount()運行渲染後（）和安裝，所以現在componentDidMount()這樣做以後的工作原理：

componentDidMount() { 
    var data = [ 
     {"id":1, "desc": "Some description of a request", "group": "Today"}, 
     {"id":2, "desc": "Another description of a request", "group": "Today"} 
     ]; 

    console.log("Loading data..."); 

    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(data), 
     loaded  : true 
    }); 
    }

來源

2016-12-30 19:31:46

反應本機加載構造函數之外的數據

回答

相關問題