Listview 反应本机：尝试将Firebase中的数据显示到列表中

嗨，我正试图显示一个包含Firebase DB数据的列表，但我现在被卡住了：/

这是我的密码：

请求我的数据：

  this.tasksRef = firebase.database().ref('/store');
  const dataSource = new ListView.DataSource({
   rowHasChanged: (row1, row2) => row1 !== row2,
  });
  this.state = {
   loaded: false,
   dataSource: dataSource
  };

如果我的数据发生更改，尝试执行以下操作：

 componentWillMount() {
  // start listening for firebase updates
  this.listenForTasks(this.tasksRef);
 }

 listenForTasks(tasksRef) {
  tasksRef.on('value', (dataSnapshot) => {
   var tasks = [];
   dataSnapshot.forEach((child) => {
    tasks.push({
      name: child.val().title,
      _key: child.key
    });
   });

   this.setState({
    dataSource: this.state.dataSource.cloneWithRows(tasks)
   });
 });
}

我的渲染：

 render(){
  return (
   <View style={styles.container}>
     <Header text="Account" loaded={this.state.loaded} />
     <ListView
      dataSource={this.state.dataSource}
      enableEmptySections={true}
      renderRow={this._renderItem.bind(this)}
      style={styles.listView}/>
   </View>
  );
}

render（）{
返回(
);
}

---

我正在尝试学习react，因此提前感谢您的帮助：）

要创建您的列表，请尝试以下内容。首先创建一个createDataSource函数，可以在componentWillReceiveProps和componentWillMount上调用该函数。然后把这个传给列表

class ListingDemo extends Component {
  componentWillMount () {
    this.createDataSource(this.props.listing) // the listing from your firebase connection
  }

  componentWillReceiveProps ({ listing }) {
    // this.props are the old props
    this.createDataSource(listing)
  }

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

    this.dataSource = ds.cloneWithRows(listing)
  }
}

然后在渲染函数上

<ListView
   dataSource={this.dataSource}
   renderRow={this.renderRow}
/>

---

下面是我现在更新的代码：

    constructor(props){
     super(props);
     this.props.listing = firebase.database().ref('/store');

     this.state = {
      loaded: false,
     };
    }
    componentWillMount () {
     this.createDataSource(this.props.listing)
    }

    componentWillReceiveProps ({ listing }) {
     this.createDataSource(listing)
    }

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

    this.dataSource = ds.cloneWithRows(listing)
   }

   render(){
    return (
     <View style={styles.container}>
      <Header text="Account" loaded={this.state.loaded} />
      <ListView
       dataSource={this.dataSource}
       renderRow={this.renderRow}
      />
     </View>
    );
   }

构造函数（道具）{
超级（道具）；
this.props.listing=firebase.database（）.ref（'/store'）；
此.state={
加载：false，
};
}
组件将安装（）{
this.createDataSource（this.props.listing）
}
componentWillReceiveProps（{listing}）{
this.createDataSource（列表）
}
createDataSource（{listing}）{
const ds=new ListView.DataSource({
行已更改：（r1，r2）=>r1！==r2
})
this.dataSource=ds.cloneWithRows（列表）
}
render（）{
返回(
);
}

我得到了这个错误：

undefined不是对象（evaluationg“ref2.listing”）

感谢您的帮助，我正在尝试了解它的工作原理。

更新：

这是我的代码，我得到了这个错误

RenderRow的值为空

构造函数（道具）{
超级（道具）；
此.state={
数据源：新建ListView.dataSource({
行已更改：（行1，行2）=>行1！==行2，
}),
加载：false
};
this.itemsRef=this.getRef（）.child（'items'）；
}
getRef（）{
返回firebase.database（）.ref（'/store'）；
}
listenformes（itemsRef）{
itemsRef.on（'值'，（捕捉）=>{
//将子对象作为数组获取
var项目=[]；
snap.forEach（（子项）=>{
推({
标题：child.val（）.title，
_关键字：child.key
});
});
这是我的国家({
dataSource:this.state.dataSource.cloneWithRows（项目）
});
});
}
componentDidMount（）{
this.listenforms（this.itemsRef）；
}
render（）{
返回(
);
}

---

：/：/：/

非常感谢您的帮助Panagiotis:）但我仍然有一个错误。请检查我的更新答案。您需要从firebaseIt中正确获取数据这比以前更好，但仍然存在一个错误，原因是my renderRow值不幸为空：(

    constructor(props){
     super(props);
     this.props.listing = firebase.database().ref('/store');

     this.state = {
      loaded: false,
     };
    }
    componentWillMount () {
     this.createDataSource(this.props.listing)
    }

    componentWillReceiveProps ({ listing }) {
     this.createDataSource(listing)
    }

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

    this.dataSource = ds.cloneWithRows(listing)
   }

   render(){
    return (
     <View style={styles.container}>
      <Header text="Account" loaded={this.state.loaded} />
      <ListView
       dataSource={this.dataSource}
       renderRow={this.renderRow}
      />
     </View>
    );
   }

 constructor(props){
  super(props);
  this.state = {
   dataSource: new ListView.DataSource({
     rowHasChanged: (row1, row2) => row1 !== row2,
   }),
   loaded: false
 };
 this.itemsRef = this.getRef().child('items');
}

getRef() {
 return firebase.database().ref('/store');
}

listenForItems(itemsRef) {
 itemsRef.on('value', (snap) => {
  // get children as an array
  var items = [];
  snap.forEach((child) => {
    items.push({
      title: child.val().title,
      _key: child.key
    });
  });
  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(items)
  });

 });
}

componentDidMount() {
 this.listenForItems(this.itemsRef);
}

render(){
 return (
  <View style={styles.container}>
    <Header text="Account" loaded={this.state.loaded} />
    <ListView
      dataSource={this.state.dataSource}
      renderRow={this.renderRow}
    />
  </View>
 );
}