Javascript 如何在react native中渲染对象？

我正在使用react native开发一个链接到firebase的简单应用程序。我有一个类，其中有几个方法，就我在线搜索这个问题所知，它似乎与渲染函数中的输出有关。但是我检查了我的方法，我无法确定确切的问题

这是我的班级：

class ToDo_React extends Component {
  constructor(props) {
    super(props);
  var myFirebaseRef = new Firebase(' ');
  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)
    });
  });
  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();
}
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>
);
}
}

类ToDo\u组件{
建造师（道具）{
超级（道具）；
var myFirebaseRef=新的Firebase（“”）；
this.itemsRef=myFirebaseRef.child（'items'）；
此.state={
纽托德：“，
todoSource:new ListView.DataSource（{rowHasChanged:（row1，row2）=>row1！==row2}）
};
此参数为.items=[]；
}
componentDidMount（）{
//添加待办事项时
this.itemsRef.on（'child_added'，（dataSnapshot）=>{
this.items.push（{id:dataSnapshot.key（），text:dataSnapshot.val（）}）；
这是我的国家({
todoSource:this.state.todoSource.cloneWithRows（this.items）
});
});
this.itemsRef.on（'child_removed'，（dataSnapshot）=>{
this.items=this.items.filter（（x）=>x.id！==dataSnapshot.key（））；
这是我的国家({
todoSource:this.state.todoSource.cloneWithRows（this.items）
});
});
}
addTodo（）{
如果（this.state.newTodo！=''）{
此.itemsRef.push({
托多：这个。州。纽托多
});
这是我的国家({
新主题：“”
});
}
}
removeTodo（行数据）{
this.itemsRef.child（rowData.id）.remove（）；
}
render（）{return(
我的待办事项
this.setState（{newTodo:text}）值={this.state.newTodo}/>
this.addTodo（）}
参考底色='#dddddd'>
添加
);
}
renderRow（行数据）{
返回(
this.removeTodo（rowData）}>
{rowData.text}
);
}
}

问题在于您的

renderRow

方法，其中您渲染：

<Text style={styles.todoText}>{rowData.text}</Text>

请注意，

val（）

因此，您可能想在这里执行的操作是推送
this.state.newTodo
而不是对象

this.items.push({id: dataSnapshot.key(), text: dataSnapshot.val()});

this.itemsRef.push({
  todo: this.state.newTodo
});