Question

您好我试图在我的Firebase数据库中显示包含数据的列表，但我现在卡住了：/

这是我的代码：

请求我的数据：

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

我试图学习反应，所以提前感谢你的帮助:)。

Answer 1

要创建列表，请尝试以下操作。首先，创建一个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}
/>

如果有帮助，请告诉我

更新：您需要从firebase正确获取数据，因此在componentWillMount函数中添加以下内容。

tasksRef.on('value', (snap) => {

      // get children as an array
      var items = [];
      snap.forEach((child) => {
        items.push({
          title: child.val().title,
          _key: child.key
        });
      });

      createDataSource(items)

    });

Answer 2

现在我的更新代码：

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

我收到了这个错误：

undefined不是一个对象（评估＆＃39; ref2.listing＆＃39;）

感谢您的帮助，我尝试了解它是如何运作的。

Answer 3

更新：

所以现在这里是我的代码，我收到了这个错误

RenderRow的值为空

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

：/：/：/

React Native：尝试将Firebase中的数据显示到列表中

3 个答案: