如何从react-native访问Firebase中的数据？

Question

我无法从Firebase渲染数据。

这是我当前在firebase上的数据结构：{name：“ sleep”}即。 这是数据库包含atm的唯一对象。 使用ListView，它呈现一行（根据数据库中的项目数显示该行的背景和边框），但是，行内没有文本。

ListView代码：

             <ListView
              enableEmptySections={true}
              dataSource={this.state.dataSource}
              renderRow={this._renderItem.bind(this)}
               />

  _renderItem(task) {
    return (
    <ListItem task={task} />
    );
  }

ListItem的代码：

class ListItem extends Component {
  render() {
    return (
      <View style={styles.listItem}>
        <Text style={styles.listItemTitle}>{this.props.task.name}</Text>
      </View>
    );
  }
}

用于侦听任务的代码

listenForTasks(tasksRef) {
  tasksRef.on('value', (dataSnapshot) => {
    var tasks = [];

    dataSnapshot.forEach((child) => {
      tasks.push({
        name: child.val().name,
        _key: child.key
      });

console.log(dataSnapshot.val()); // returns JSON object of {name: 'sleep'}
console.log(tasks); // returns an array containing the object of {name: 'sleep'}
console.log(dataSnapshot.val().name); // returns 'sleep'

    });

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

Answer 1

您需要为ListItem组件设置一个构造函数：

class ListItem extends Component {

//Add this....
constructor(props){
   super(props)
}
//--------------

  render() { 
     return ( <View style={styles.listItem}>
        <Text style={styles.listItemTitle>
        {this.props.task.name}
        </Text>
      </View> ); 
  } 
}