Javascript ReactJS listView以响应本机listView

我的目标是将react listView转换为工作react本机listView。第一个代码是reactJs代码，第二个是我的ReactNative try。主要问题是我需要替换data.map。这将允许我获取url

编辑

我没有收到错误，但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);

类应用程序扩展组件{
组件willmount（）{
this.props.dispatch（{type:'BLAH'}）；
}
render（）{
返回(
{this.props.exception&&exception:{this.props.exception}
数据：{this.props.Data.map（e=>{e.url}}
);
}
}
导出默认连接（状态=>({
数据：state.data，异常：state.exception
}))（App）；

要对本机Listview作出反应，请执行以下操作：

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);

类应用程序扩展组件{
建造师（道具）{
超级（）；
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
此.state={
数据源：ds.cloneWithRows（props.data）
};
console.log（props.data）
}
组件willmount（）{
this.props.dispatch（{type:'BLAH'}）；
}
renderRow（行数据）{
返回(
{rowData.url}
);
}
render（）{
返回(
);
}
}
导出默认连接（状态=>({
数据：state.data
}))（App）；

检查。数据源属性获取的是数据的实例，而不是数据的数组

这些文档显示了一个最小的示例实现：

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>}
    />
  );
},

getInitialState:function（）{
var ds=新的ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
返回{
数据源：ds.cloneWithRows（['row1'，'row2']），
};
},
render:function（）{
返回(
{rowData}}
/>
);
},

添加

组件将接收道具

解决问题：

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

---

你的问题是什么？我需要替换react native中的data.map函数，因为我无法设置this.props.datajust replace['row 1'，'row 2']为this.props.datait为空。如果您在app.js中调试示例，您将在开始时看到该示例为空，并且在渲染后刚刚填充该示例，那么问题可能出现在导出默认连接（state=>（{data:state.data}））（app）中；是的，它是文档的摘录，演示了如何为

列表视图提供数据。我无法从我使用的机器访问此页面。