ListView 在更新或编辑数据后不会重新渲染本机反应

Question

更新帖子

Khatri 我认为你是对的，所以我更改了我的代码但我仍然​​不明白如何在更新我的待办事项文本后重新排列我的列表。

我制作了一个 Todo 应用程序。一切正常。但是当我要更改我的待办事项文本时，它会成功更改数据库，但是如果不重新打开我的应用程序，我就看不到我的更新文本或待办事项。 更改文本后如何重新渲染？

        const myFirebaseRef = Firebase.database().ref();
        this.itemsRef = myFirebaseRef.child('items');

        this.state = {
            newTodo: '',
            todoSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}),
            modalVisible: false,
            editTodoVal: 'Edit Your Todo',
            updateId: '',
            refreshing: false,
        };
        this.items = [];


componentDidMount() {
        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)
            });
        });
        this.itemsRef.on('child_changed', (dataSnapshot) => {
            // what code hare I can make for it ???
        });

    }


addTodo() {
    if (this.state.newTodo !== '') {
        console.log('ADD Todo Successfully');
        this.itemsRef.push({
            todo: this.state.newTodo
        });
        this.setState({
            newTodo: ''
        });
    }
}

updateTodo() {
    if (this.state.editTodoVal !== '') {
        this.itemsRef.child(this.state.updateId)
            .update({
                todo: this.state.editTodoVal
            });
        alert('Success fully update Todo');
        this.setState(this.state);
        this.setState({
            editTodoVal: ''
        });
        this.setModalVisible(false)
    }
}

removeTodo(rowDate) {
    this.itemsRef.child(rowDate.id).remove();
}

 editTodo(rowDate) {
    this.setState({
        editTodoVal: rowDate.text.todo,
        updateId: rowDate.id
    });

    this.setModalVisible(true)
}

            <ListView
                dataSource={this.state.todoSource}
                renderRow={this.renderRow.bind(this)}/>

renderRow(rowData) {
        return (
            <View style={styles.appContainerBody}>
                <View>
                    <Text style={styles.todoText}>{rowData.text.todo}</Text>
                </View>
                <View style={styles.actionView}>
                    <Text onPress={() => this.removeTodo(rowData)} style={styles.removedText}>
                        <FontAwesome name="trash" size={16}/>
                    </Text>
                    <Text onPress={() => this.editTodo(rowData)} style={styles.editeText}>
                        <FontAwesome name="pencil-square-o" size={16}/>
                    </Text>
                </View>
            </View>
        )
    }

Answer 1

它不会重新渲染您的应用程序，因为您正在直接改变状态，这是错误的做法。您应该使用 setState 方法来更新状态，这也会在状态更改成功后触发重新渲染

editTodo(rowDate) {
    this.setState({
         editTodoVal: rowDate.text.todo, 
         updateId:  rowDate.id
    });

    this.setModalVisible(true)
}