ReactJS列表視圖到反應本地列表視圖

Question

我的目標是將反應listView轉換爲工作react-native ListView。第一個代碼是工作reactJs代碼，第二個是我的反應原生的嘗試。主要問題是我需要替換data.map。這將允許我獲得網址。 reference

編輯

我沒有得到一個錯誤，但ListView的字段爲空。

class App extends Component { 

    componentWillMount() { 
     this.props.dispatch({type: 'BLAH'}); 
    } 


    render(){ 
     return (<div> 
      {this.props.exception && <span>exception: {this.props.exception}</span>} 
      Data: {this.props.data.map(e=><div key={e.id}>{e.url}</div>)} 

      </div>); 
    } 
} 

export default connect(state =>({ 
    data:state.data , exception:state.exception 
}))(App); 

反應本地列表視圖：

class App extends Component { 

    constructor(props) { 
     super(); 
     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
     this.state = { 
     dataSource: ds.cloneWithRows(props.data) 
     }; 
     console.log(props.data) 
    } 

    componentWillMount() { 
     this.props.dispatch({type: 'BLAH'}); 
    } 

    renderRow(rowData) { 
     return (
     <View> 
      <Text>{rowData.url}</Text> 
     </View> 
    ); 
    } 

    render(){ 
     return (
     <View> 
      <ListView dataSource={this.state.dataSource} renderRow={this.renderRow}/> 
     </View> 
     ); 
    } 
} 

export default connect(state =>({ 
    data:state.data 
}))(App); 

Answer 1

添加componentWillReceiveProps解決的問題：

componentWillReceiveProps(newProps) { 
    this.setState({ 
    dataSource: this.state.dataSource.cloneWithRows(newProps.data), 
    }); 
} 

Answer 2

檢查the ListView docs。數據源屬性採用ListViewDataSource的實例，而不是數據的數組。

該文檔顯示一個小例子，實現：

getInitialState: function() { 
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    return { 
    dataSource: ds.cloneWithRows(['row 1', 'row 2']), 
    }; 
}, 

render: function() { 
    return (
    <ListView 
     dataSource={this.state.dataSource} 
     renderRow={(rowData) => <Text>{rowData}</Text>} 
    /> 
); 
},