如何在React Native中渲染对象?

努尔

我正在使用React Native开发一个链接到Firebase的简单应用程序。我有一个带有一些方法的类,据我可以通过在线搜索了解此问题,这似乎与render函数中的输出有关。但我检查了方法,无法确定确切的问题。在此处输入图片说明

这是我的课:

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

问题在于renderRow您渲染方法:

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

在这里,您将对象作为Text元素的子元素而不是字符串传递这是因为要在text此处为数据存储下设置一个对象

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

请注意,val()这里是对您已在此处推送到Firebase实例的对象的引用(请参阅firebase docs):

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

因此,您可能想在这里执行的只是推入this.state.newTodo而不是对象。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在React Native中渲染HTML

来自分类Dev

如何在React渲染函数中从JSON对象获取值?

来自分类Dev

如何在StyleSheet.create中获取对象?(React Native)

来自分类Dev

如何在React中从数组渲染随机对象?

来自分类Dev

在React中渲染JavaScript对象

来自分类Dev

如何在React中从非React库中渲染div对象?

来自分类Dev

将数组对象渲染到FlatList React Native中

来自分类Dev

如何在React Redux中渲染Date对象?

来自分类Dev

在React渲染中循环对象

来自分类Dev

如何在react-native中过滤JavaScript对象

来自分类Dev

如何在React JS中渲染对象

来自分类Dev

如何在React Native中传递对象?

来自分类Dev

如何在react中渲染嵌套元素

来自分类Dev

如何在React Native中的对象中获取特定值?

来自分类Dev

在React中渲染数组/对象

来自分类Dev

我如何在React Native中通过此对象映射?

来自分类Dev

在React Native中以文本形式渲染对象项

来自分类Dev

React Native中的条件渲染

来自分类Dev

如何在React中渲染动态表

来自分类Dev

如何在React中渲染递归组件?

来自分类Dev

如何在React Native中从单独的组件创建对象数组?

来自分类Dev

如何在React中渲染存储在对象中的数组?

来自分类Dev

如何在React渲染函数中从JSON对象获取值?

来自分类Dev

如何在React中渲染对象的属性?

来自分类Dev

在 React 中渲染对象数组

来自分类Dev

如何在 react-native 中访问导航对象

来自分类Dev

如何在 react-native 中呈现 JSON 对象

来自分类Dev

在 React-Native 中渲染

来自分类Dev

如何在 React 中渲染/映射对象数组