Как визуализировать объекты в реакции родной?

Question

Я работаю над простым приложением, связанным с firebase, используя реакцию native. У меня есть один класс с несколькими методами в нем, насколько я могу судить по поиску в Интернете по этой проблеме, похоже, что-то связано с выходом в функции рендеринга. но я проверил свои методы, и я не могу определить точную проблему.

и это мой класс:

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

Answer 1

Проблема с вашим методом 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 вместо объекта.