如何使用数组渲染一组孩子

Question

我正在创建一个购物清单应用程序，其中前端是 react-native，后端是 firebase。在购物清单中要添加项目。我已经在 firebase 中存储了一些项目，并从 firestore 中检索了这些项目，但它显示了一个错误：

Error

对象作为 React 子对象无效（找到：带有键的对象（$$typof,key,ref,props,_owner,_store）。如果您要渲染子对象的集合，请改用数组。

我正在使用 react-native 0.55.4 版本。请帮帮我。

这是 index.js 文件

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  ListView,TouchableHighlight,AppRegistry
} from 'react-native';
import * as firebase from 'firebase';
import ToolBar from './app/components/ToolBar/ToolBar';
const styles = require('./app/style');

const firebaseConfig = {
  apiKey: 'AIzaSyClhqB9TEEffc4szIHUEVt0OqXvKQOEwxQ',
    authDomain: 'grocerryapp-fbe06.firebaseapp.com',
    databaseURL: 'https://grocerryapp-fbe06.firebaseio.com',
    projectId: 'grocerryapp-fbe06',
    storageBucket: 'grocerryapp-fbe06.appspot.com',
    messagingSenderId: '903884995524'
}
const firebaseApp = firebase.initializeApp(firebaseConfig);


export default class App extends Component {
  constructor(){
    super();
    let ds= new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2});
    this.state={
      itemDataSource:ds
    }

    this.itemsRef = this.getRef().child('items');
    this.renderRow = this.renderRow.bind(this);
    this.pressRow = this.pressRow.bind(this);
  }
  getRef(){
    return firebaseApp.database().ref();
  }
  componentWillMount() {
    this.getItems(this.itemsRef);
  }
  componentDidMount() {
    this.getItems(this.itemsRef);
  }
  getItems(itemsRef) {
    //let items = [{title: 'Item One'},{title: 'Item Two'}];
    itemsRef.on('value',(snap) => {
      let items = [];
      snap.forEach((child) => {
        items.push({

          title: child.val().title,
          _key: child.key

        });
      });
      this.setState({
        itemDataSource: this.state.itemDataSource.cloneWithRows(items)
      });
    });
  }
  pressRow(item){
    console.log(item);
  }
renderRow(item){
  return(
    <TouchableHighlight onPress={() => {
      this.pressRow(item);
    }}>
<View style={styles.li}>
<Text style={styles.liText}>{item.title}</Text>
</View>
    </TouchableHighlight>
  );
}


  render() {
    return (
      <View style={styles.container}>
      <ToolBar title="Item Lister" />
      <ListView
        dataSource={this.state.itemDataSource}
        renderRow={this.renderRow}

      />
            </View>
    );
  }
}


AppRegistry.registerComponent('itemlister', () => 'itemlister');

Answer 1

我认为这是一个异步问题。您的 setState 在您的 forEach 完成之前触发，因此您的 this.state.itemDataSource.cloneWithRows(items), items 不完整。

getItems(itemsRef) {
//let items = [{title: 'Item One'},{title: 'Item Two'}];
itemsRef.on('value',(snap) => {
  let items = [];
  snap.forEach((child) => {
    items.push({

      title: child.val().title,
      _key: child.key

    });
  });
  this.setState({
    itemDataSource: this.state.itemDataSource.cloneWithRows(items)
  });
});

}

你可以……

getItems(itemsRef) {
//let items = [{title: 'Item One'},{title: 'Item Two'}];
itemsRef.on('value',(snap) => {
let items = [];
snap.forEach((child) => {
  items.push({

    title: child.val().title,
    _key: child.key

  });
});
}.then(() => {
  this.setState({
    itemDataSource: this.state.itemDataSource.cloneWithRows(items)
  })
})

});
}

Answer 2

return() 会帮助你

 render() {
  return (
    <View style={styles.container}>
    <ToolBar title="Item Lister" />
    <ListView
      dataSource={this.state.itemDataSource}
      renderRow={(rowData) => {
       return(
        <View>
          <TouchableHighlight 
          onPress={() => this.pressRow(rowData)}
          >
           <View style={styles.li}>
             <Text style={styles.liText}>{item.title}</Text>
           </View>
          </TouchableHighlight>
       </VIew>
       )
      }}
    />
    </View>
 );
 }

Answer 3

我看到了这个错误，我猜它与firebase 库有关！当前版本有问题，请改用5.0.2 版本！

npm install --save firebase@5.0.2