Question

我正在开发一个简单的应用程序链接到firebase使用react native，当我想呈现信息时我遇到了问题。我的渲染方法看起来像这样：

  renderRow(rowData) {
  return (
    <TouchableHighlight
      underlayColor='#dddddd'
      onPress={() => this.removeTodo(rowData)}>
      <View>
        <View style={styles.row}>
          <Text style={styles.todoText}>{rowData.text}</Text>
        </View>
        <View style={styles.separator} />
      </View>
    </TouchableHighlight>
  );
}

问题是这是一个对象rowData.text而不是一个字符串，因为它应该是

这是我将信息推送到firebase的方法的一部分：

this.itemsRef.on('child_added', (dataSnapshot) => {
      this.items.push({id: dataSnapshot.key(), text: dataSnapshot.val()});
      this.setState({
        todoSource: this.state.todoSource.cloneWithRows(this.items)
      });
    });

firebase文档仅声明.val（）可以返回基元（字符串，数字或布尔值），数组或对象。它也可能返回null。我知道在我的情况下，它返回一个对象，但我不知道为什么，也不知道如何将其更改为字符串？

编辑：这是我正在上课的课程：

class ToDo_React extends Component {
  // Your App Code
    constructor(props) {
      super(props);
      var myFirebaseRef = new Firebase('https://resplendent-heat-7859.firebaseio.com');
      this.itemsRef = myFirebaseRef.child('items');

      this.state = {
      newTodo: '',
      todoSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2})
      };

      this.items = [];
      }
      componentDidMount() {
    // When a todo is added
    this.itemsRef.on('child_added', (dataSnapshot) => {
      this.items.push({id: dataSnapshot.key(), text: dataSnapshot.val()});
      this.setState({
        todoSource: this.state.todoSource.cloneWithRows(this.items)
      });
    });

    // When a todo is removed
    this.itemsRef.on('child_removed', (dataSnapshot) => {
        this.items = this.items.filter((x) => x.id !== dataSnapshot.key());
        this.setState({
          todoSource: this.state.todoSource.cloneWithRows(this.items)
        });
    });
  }
  addTodo() {
if (this.state.newTodo !== '') {
this.itemsRef.push({
  todo: this.state.newTodo
});
this.setState({
  newTodo : ''
});
}
}
removeTodo(rowData) {
this.itemsRef.child(rowData.id).remove();
}
        removeTodo(rowData) {
      this.itemsRef.child(rowData.id).remove();
    }
    render() {
  return (
    <View style={styles.appContainer}>
      <View style={styles.titleView}>
        <Text style={styles.titleText}>
          My Todos
        </Text>
      </View>
      <View style={styles.inputcontainer}>
        <TextInput style={styles.input} onChangeText={(text) => this.setState({newTodo: text})} value={this.state.newTodo}/>
        <TouchableHighlight
          style={styles.button}
          onPress={() => this.addTodo()}
          underlayColor='#dddddd'>
          <Text style={styles.btnText}>Add!</Text>
        </TouchableHighlight>
      </View>
      <ListView
        dataSource={this.state.todoSource}
        renderRow={this.renderRow.bind(this)} />
    </View>
  );
}
renderRow(rowData) {
  return (
    <TouchableHighlight
      underlayColor='#dddddd'
      onPress={() => this.removeTodo(rowData)}>
      <View>
        <View style={styles.row}>
          <Text style={styles.todoText}>{rowData.text}</Text>
        </View>
        <View style={styles.separator} />
      </View>
    </TouchableHighlight>
  );
}
}

Answer 1

我相信你使用ListView的DataSource是错误的。我可能错了，但我认为你不应该覆盖你的初始ListView.DataSource实例。放手一搏。

constructor(props) {
  super(props);
  var myFirebaseRef = new Firebase('https://resplendent-heat-7859.firebaseio.com');
  this.itemsRef = myFirebaseRef.child('items');
  this.items = [];
  this.ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2})

  this.state = {
    newTodo: '',
    todoSource: this.ds.cloneWithRows([])
  };

}
componentDidMount() {
  this.itemsRef.on('child_added', (dataSnapshot) => {
    this.items.push({id: dataSnapshot.key(), text: dataSnapshot.val()});
    this.setState({
      todoSource: this.ds.cloneWithRows(this.items)
    });
  });

  this.itemsRef.on('child_removed', (dataSnapshot) => {
    this.items = this.items.filter((x) => x.id !== dataSnapshot.key());
    this.setState({
      todoSource: this.ds.cloneWithRows(this.items)
    });
  });
}

Answer 2

万一你没有想出这个，你必须添加val（）。todo才能使这个工作。我添加了更多代码，以便ListView将在初始加载时呈现。希望这有帮助！

  componentDidMount() {
    this.setState({
     todoSource: this.state.todoSource
    });

    // When a todo is added
    this.itemsRef.on('child_added', (dataSnapshot) => {
     this.items.push({id: dataSnapshot.key(), text: dataSnapshot.val().todo});
     this.setState({
      todoSource: this.state.todoSource.cloneWithRows(this.items)
   });
});

在firebase链接应用中读取.val（）对象的值？

2 个答案: